I was building a Calendar with dynamic events.
Simplest representation of my event object
id : " sdsddsd "
start : "2018-05-13T0..."
end : "2018-05-26T0"
open_monday: true
open_tuesday: false
open_wednesday: true
open_thursday: false
...
So in the month view calendar, I wanted to show my events and within the event if open_monday is true then set the background of that day grid to green. The following Tuesday will use the value open_tuesday and it is false so it will display red.
The red and green background will only be inside an Event. If the day grid isn't within any event, it will be left as blank.
How can I do this. Or is there a better way to do this using resources, constraintsetc. ?.
Thanks.
I am not sure I understand, but it is rather strange to pass the whole list of open/closed weekdays with each event. You should rather determine which weekday your event is and act accordingly. Just add an eventRender callback field to your calendar to control exactly the layout of the HTML element rendering the event. See
https://fullcalendar.io/docs/eventRender
To know the weekday of an event, use
moment(event.start).day()
See
https://momentjs.com/docs/#/get-set/day/
Alternatively, you can add an eventDataTransform field to your calendar, which will be applied to each event when it is loaded, so you can change any of its layout specifiers (color, backgroundColor, className...), see list at
https://fullcalendar.io/docs/event-object
Related
I was wondering if there is a way to change the graphic of an event in Fullcalendar v5.
As it for now i know that if you set the properties Allday to "True" you'll see a full blue event, if you don't you'll see a different one. Are there some other event graphic type? Because i created a calendar with 3 type of event but 2 of these graphically results equal so it's a little bit sad.
It would be cool even just a way to change the color from blue to something else based on the type of event choosen, maybe it would be even better. Thanks <3
(image to show the 3 type of event i created and the fact that 2 of them are the same because they do not have allday: true)
I would like to disabled slot time on drag and drop event when the slot has been already taken. How could I make it work?
I'm using Fulcalendar Event javascript and my event duration is only 15 minutes like this:
I checked the doc but didn't found how. I think I have to compare the title event already taken to blank in jQuery before accept the new drag and drop event if it's return true.
You can use the eventOverlap option in fullCalendar, like this:
eventOverlap: false
This will mean that the UI will prevent events from being dragged or resized such that they fully or partially take up space occupied by an existing event.
See https://fullcalendar.io/docs/event_ui/eventOverlap/ for more details.
I'm using jquery full calendar version 2.2. My event has editable : true property. But If I dragged it to another day, event's start date or end date does not update. Why is that? Are there any property to do it?
I try to use amCharts. I have a chart that represent dayly data. I can't make so user wouldn't be able to choose period less than 5 days (i dont want send 5 days points to chart)
Also i can attach changed event to period selector, but chart zooming and chart scroll bar have no any events and methods i could use.
I need to do so user will see message "please select range that is more than 5 days" when he tries to scroll, select period and zoom chart. And set chart zoom to 5DD.
Also i mentioned that period selector changed event, fire every time when blur event fired on inputs, i think it's not right behavior. It should fire when date changed, yep?
chart.periodSelector.addListener('changed', function(){
alert('changed');
});
I have date picker that attached to period selector inputs (it don't permit user to select less than 5 days range), but i can only update my datepicker ranges only if user input date, i can't to do anything if he zoomed, scrolled chart. I don't see any events in your API for that.
Thanks for your help! Will wait any advice.
Use zoomed event instead.
chart.addListener('zoomed', function (event) {
// Your code
}
And now, to get the selector's start and end date, use this:
event.startDate
event.endDate
Is there a way to add dummy events to Full calendar to divide each day into slots in month view, that is lets say i want three slots in a day nad there is space for 5 so i add an event, then add a dummy event which is transparent and doesn't show, then add event and so on so that there are three slots there. Is there a way to add the events in a loop or something, i can handle their sorting i.e i just need to add two dummy events to each box and the rest will be done. So is there an easy way to do this short of making so many events and adding them with the real events?
EDIT :
OK the given approach doesn't work because this way instead of making slots, it just occupies the first three positions, now if it were single day events and i added an event whose start time fell between the start times of the dummy events, it would automatically be placed between them, which is what i want to achieve.
It seems that your problem doesn't relate directly with "dummy" events. But, in any case, you can have arbitrary events created by a function you can use as the source of your events, which you can bind to the events property.
http://arshaw.com/fullcalendar/docs/event_data/events_function/
var calendar = $("#calendar").fullCalendar({
// your calendar options (...)
events: function(startDate, endDate, callback) {
callback({title: "Dummy event",
start: startDate,
end: endDate});
}
)};
This function is going to be invoked when the calendar moves into another week or month, for example, returning a dummy event for the period.