williamtroup / calendar.js Goto Github PK
View Code? Open in Web Editor NEWπ A javascript drag & drop event calendar, that is fully responsive and compatible with all modern browsers.
Home Page: https://calendar-js.com
License: MIT License
π A javascript drag & drop event calendar, that is fully responsive and compatible with all modern browsers.
Home Page: https://calendar-js.com
License: MIT License
Describe the bug
A clear and concise description of what the bug is.
The onPreviousYear, onNextYear, and onSetDate custom triggers are not firing as expected when using those functions within the calendar. Fiddle example of basic calendar with custom triggers defined https://jsfiddle.net/mrussojr/u8mogrvk/.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Expected that the custom trigger defined in the option to fire, in the most basic example, to write output to the console.
Screenshots
No screenshots, but behavior is replicable in the fiddle above.
Desktop (please complete the following information):
the exports show the wrong date by month:
From: 10/05/2021 00:00 <----------------------------- should be 10/06/2021
To: 10/05/2021 00:00
Title: June-10 <----------------------------------------------------------- created with the GUI, double click
Description:
Location:
Group:
IsAllDay: No
Color:
ColorText:
ColorBorder:
RepeatEveryExcludeDays:
Url:
RepeatEvery: Never
OrganizerName: Your Name
OrganizerEmailAddress: [email protected]
Id: 5aa20652-f2f0-e8c7-5639-6f5e957fee9c
Created: 19/06/2021 20:48
Describe the bug
Some translations shouldn't use "st", "nd", "rd" and "th" in the numbers of the days.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
Day numbers should be "1", "2", "3", ... without "st", "nd", "rd" and "th".
Very nice calendar. Do you plan to support filtering of events at the calendar level and view all events? I see search highlights the event on a page, but looking across the entire calendar or analyzing a particular criteria would be helpful.
Hello,
I am impressed by your Calendar.js project, especially how you handle repeating events.
As far as I can see, it is not possible to change one item from a repeating event like in Google agenda.
There you have the possibility to edit or delete an item, and you are prompted if you want this edit for
A - this event on that particular date only,
B - or for all these events,
C - or these events in the future.
One way to implement A would be that a not-repeating copy is made, for the chosen date only, and maintain an array or hash in the repeating event where the repeating event must not be shown
Implementing B is not too difficult, I guess the implementation is already there.
C would need a creation of a new repeating event (including the exception array from the original) and terminate the original repeating event.
Regards,
Willem Vermin
Describe the bug
When a single Event (not recurring event) starts in one month and ends in another, the Event does not display in Month view.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
It is expected the Event is shown in All months it covers, not just the start month.
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
The same issue occurs when the Event spans multiple months, eg someone is on extended leave.
The initialDateTime option is not honored when opening in full-day, full-week, or timeline. The full-year does display the requested year, but not at the month or day requested. This is true whether or not the viewToOpenOnFirstLoad is set.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
I expect the calendar to open to the initialDateTime I entered into the options until the user navigates away from that date.
I expect the initialDateTime to show if the viewToOpenOnFirstLoad is set.
Screenshots
This is using the calendar.js.html test file.
initialDateTime and viewToOpenOnFirstLoad is set
commenting out the viewToOpenOnFirstLoad
Month view does show initialDateTime
clicking on the week view shows the current week
Desktop (please complete the following information):
Smartphone (please complete the following information):
not using a smartphone
Additional context
The calendar is a nice, lightweight option but unfortunately I'm working under certain constraints that make it vital to fix this. I have no problems with fixing it myself so I'll come back to it a little later.
Calendar.js/src/calendar.js.scss
Line 2565 in ddb4e88
The previous related titles need to explicitly specify the color, or inherit the settings of some elements, but should not be inherited to the body, otherwise the text will not be visible in dark mode.
The last one is date selection, no related buttons are displayed.
Event Object "from" and "to" is always setting to the date value of the "from" date if events are parsed from the server as json object array
Describe the bug
A clear and concise description of what the bug is.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
A clear and concise description of what you expected to happen.
Screenshots
If applicable, add screenshots to help explain your problem.
Desktop (please complete the following information):
Smartphone (please complete the following information):
Additional context
Add any other context about the problem here.
After using the example code:
var calendarElement = document.getElementById( "calendar" );
var calendarInstance2 = calendarJs( calendarElement, {
manualEditingEnabled: true
// All your options can be set here
} );
calendarInstance2 is undefined
It works by using "new"
var calendarElement = document.getElementById( "calendar" );
var calendarInstance2 = new calendarJs( calendarElement, {
manualEditingEnabled: true
// All your options can be set here
} );
Hello
Events are getting disappeared on every refresh of the webpage in drupal 9. Every time I creates an event , it gets disappear on refreshing/reloading the webpage. Refreshing the calendar(refresh button in calendar),is not deleting any events,. But refreshing the whole webpage deletes the events.
Lines 14303 to 14307 in ddb4e88
can you please post a small example how to call a function after event is added?
I want to call a ajax function to save the current month changes on a PHP server after I created a event on the GUI , thank you
Is it possible to install the script via npm?
It would be great.
https://calendar-js.com/examples/persistence.html
Line 7497 in 5e51258
The problem occurs again when double-clicking the date and the edit event pops up.
When creating a new event by clicking the plus button, no problem is found or a problem occurs.
Describe the bug
The calendarJs object cannot be instantiated.
I downloaded the latest version and created a simple html in a local folder adding only the reference of calendar.js and I got
the error "Uncaught TypeError: Cannot read properties of undefined (reading 'addEvent')" when trying to add a new Event to the calendar.
To Reproduce
Steps to reproduce the behavior:
`
<script src="dist/calendar.js"></script> <script> var calendarInstance = calendarJs( "calendar", { manualEditingEnabled: true // All your options can be set here } ); var event = { from: new Date(), to: new Date(), title: "A New Event", description: "A description of the event" }; calendarInstance.addEvent( event ); </script> `Expected behavior
calendarInstance not to be undefined and be able to add a new event.
Desktop (please complete the following information):
Additional context
Add any other context about the problem here.
I created an event for when my shop is open and excluded holidays from it by removing them manually. When I save it to json, then reload the json file, the removed dates show back up. Below is the seriesIgnoreDates line from when I saved it, it appears to list the dates twice, then 3 times, then 4 times.
"seriesIgnoreDates":[04/06/2022,04/06/2022,01/10/2022,01/10/2022,01/10/2022,26/11/2022,26/11/2022,26/11/2022,26/11/2022,24/10/2022,24/10/2022,24/10/2022,24/10/2022,24/10/2022,05/08/2022],
I tried saving it again after removing the extra events and saving it and I got.
"seriesIgnoreDates":[0.00370919881305638,0.0003297065611605671,0.0003297065611605671,0.0003090999010880316,0.0003090999010880316,0.0003090999010880316,0.0005440158259149357,0.0005440158259149357,0.0005440158259149357,0.0005440158259149357,0.0011869436201780415,0.0011869436201780415,0.0011869436201780415,0.0011869436201780415,0.0011869436201780415,0.0011689596259329197,0.0011689596259329197,0.0011689596259329197,0.0011689596259329197,0.0011689596259329197,0.0011689596259329197,30/04/2022,04/06/2022,04/06/2022,01/10/2022,01/10/2022,01/10/2022,26/11/2022,26/11/2022,26/11/2022,26/11/2022,24/10/2022,24/10/2022,24/10/2022,24/10/2022,24/10/2022,05/08/2022],
I tried removing all the extra dates from the saved file and it still doesn't exclude the excluded dates.
Hello!
I recently updated to the newest version of Calender.js. So, I have a large amount events added onto the calendar, going back a few months since I started using it. When the autoRefreshTimer triggers a refresh, it takes a few seconds before all the events return. I noticed that even when I check off the auto-refresh, it still does the refresh, and the option ends up getting rechecked within the options display menu. (I've, for the moment, just commented out the start startAutoRefreshTimer() function).
Please add instructions on how to build the library (generate the contents of dist
), so local changes can be implemented.
Lines 14152 to 14155 in ddb4e88
These are set to a single blank character (space bar) to achieve the following style of removing the default suffix.
The interface for other languages ββis not clear, but Chinese does not have this reading habit. I will submit a translation PR later to change the status quo.
great calendar, but this issue is present :
Double click on 8th, then the event is created on 7th
did try with other dates and the same result
As example holiday events have the onClick event (seems the only one that is possible to intercept).
But if I want an event to be executed on removing one or changing some details there are some events that I can use? As I need as example that those user actions execute custom code to integrate somewhere else.
I was wondering something that I can use with addEventListener
or a global function in the CalendarJS library.
As I can see now everything executed in the calendar is just exportable as CSV/etc but I cannot intercept those user actions, in the documentation/code I don't find anything.
So while playing around with the program, I noticed that when using the add events (the one right in the thing, where you can right-click a cell, and click the add new events and the model pops up) I discovered is that whatever I date I inserted into the dialog, the event would always appear on the day before the day I selected. I have a set of images I'm attaching showing what I did and the outcome that comes up.
As you can see, despite selected the sixteenth as the date, it appears on the fifteenth.
Describe the bug
Permissions of dist/ and dist/translations/ are drwx------
. This makes the contents of this folders unaccessible for my server.
To Reproduce
Steps to reproduce the behavior:
wget https://calendar-js.com/downloads/calendar-js-2.10.17.zip
mkdir test
mv calendar-js-2.10.17.zip test
cd test
unzip calendar-js-2.10.17.zip
ls -l
Expected behavior
Reading permissions for all users is expected.
Additional context
I fix it manually using
chmod 755 dist dist/translations
I downloaded the last version today and tried again, still the same problem . I used Firefox and Chrome, even in Chrome I had the same result. I did try on the cell phone, laptop, now the issue is present everywhere . Used to be only Firefox.
First of all ty for the work. I was looking just for smth like this.
But ive run into an issue changing existing repeating events, for example when i am assigning them a group. Afterwards i get an oneventadded trigger with a new eventid and strange form/to-dates.
Anyone can replicate this?
best regards
First, great component.
The problem I have is:
I create an Event that starts 23/01/2024 from 9:00 to 9:30 and repeats every day. Down are the most importan properties I think:
from:Tue Jan 23 2024 09:00:00 GMT-0300 (hora de verano de Chile)
to:Tue Jan 23 2024 09:30:00 GMT-0300 (hora de verano de Chile)
isAllDay:false
repeatEnds:null
repeatEvery:1
repeatEveryCustomType:0
repeatEveryCustomValue:1
repeatEveryExcludeDays:[]
Then I edit one event of the serie at day 25/01/2024. I only change the time interval from 10:00 to 10:30 and keep everything else, the I click "Update" button. I get the question If I want to update "all serie" or "foward", I press "foward" button. It divide the original event into two events or series, all fine. One serie starts 23/01/2024 and ends 24/01/2024 and the other one starts 25/01/2024 with not ending date.
The problem is with the time of the first series, because it supouse to keep the original one from 9:00 to 9:30, but now is from 10:00 to 10:30
event o serie 1:
from:Tue Jan 23 2024 10:00:00 GMT-0300 (hora de verano de Chile)
to:Tue Jan 23 2024 10:30:00 GMT-0300 (hora de verano de Chile)
isAllDay:false
repeatEnds:Wed Jan 24 2024 09:00:00 GMT-0300 (hora de verano de Chile)
repeatEvery:1
repeatEveryCustomType:0
repeatEveryCustomValue:1
repeatEveryExcludeDays:[]
event o serie 2:
from:Thu Jan 25 2024 10:00:00 GMT-0300 (hora de verano de Chile)
to:Thu Jan 25 2024 10:30:00 GMT-0300 (hora de verano de Chile)
isAllDay:false
repeatEnds:null
repeatEvery:1
repeatEveryCustomType:0
repeatEveryCustomValue:1
repeatEveryExcludeDays:[]
Please excuse my english and thank you very much
Describe the bug
Checking the "Select All" checkbox deselects all items but clicking again does not reselct all.
To Reproduce
Steps to reproduce the behavior:
Expected behavior
With all checkboxes selected, the toggle checkbox should uncheck all. If all are unchecked, all should be selected. If only some are selected, traditionally, this would cause all to be selected.
Desktop (please complete the following information):
Hello again, I do hope you're having a nice day.
I was wondering if there was a feature or a planned feature, that would allow me to set a function to trigger on creating/deleting/editing an event, so I can keep track of new events, edited events, and deleted events, for keeping track of things when I save the events to a database. Since, as of now, it seems I need to wipe all the events, before saving a new set, and that's a little inefficient. Or I need to keep track of which events exist on the creation of the calendar, and compare them to the events when I'm saving, which feels a little round-a-bout. Either way, let me know, so I can proceed with whatever direction I need to.
I'm working on it and wanted to implement the Bootstrap 5 modal when double click on any date, and from that modal, I'll store event in the database and then fetch and displays them in the calendar.
Can you please tell me how can I implement the bootstrap modal when the double click of any day?
Describe the bug
The onEventClick custom trigger is not firing as expected when using the timeline view within the calendar. This is caused by the timeline-row-item-spacing divs having a z-index value higher than the event div, thus firing the click event of that object and not the event object. Setting the z-index value to 2001 allows the event to be clicked as expected. Additionally, I had to set the z-index of the timeline-row-item (row header) to be 2005 to allow the events to scroll underneath them as original functionality intended.
To Reproduce
Steps to reproduce the behavior:
Create basic calendar instance with options set for onEventClick custom trigger that will log a message to the console
Add an event to the calendar
Switch to "Timeline" view using the "View Timeline" button
Click on your new event
View console to see that output is not there for the custom trigger
Expected behavior
Expected that the custom trigger defined in the option to fire, in the most basic example, to write output to the console.
Screenshots
No screenshots.
Desktop (please complete the following information):
OS: Windows 10, v22H2, build 19045.3930
Browser: Chrome v121.0.6167.161 (64-bit), Edge v121.0.2277.112 (64-bit)
Is there a way to have a occurring meeting that happens every 2nd Tuesday, 3rd Wednesday, kind of things
It appears when I update an existing event, it will change that event's id. And old id is not passed to onEventUpdated
event. This makes impossible to update events in the database since I have no way to get old id without some javascript shenanigans. Please add an option to enable updated events to keep their old id or just return old id as well in onEventUpdated
.
Edit: I just added event.old_id = id;
line to calendarjs.js:4890
for temporary fix. But I would like to see this in original library as well.
Also, I really liked your library, thank you for working on this.
Hello,
Can I import or add some events from JSON? And see these events still on the website?
Can I disable all buttons on header except prev and next month and months and years?
I tried several options, but do not work.
Thanks for help.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.