Menu
I've been using the new background events in fullCalendar V2 to show which slots are available to book into but I'd like to also show a title of some kind in the background event. Setting 'title' on the event doesn't show anything.
Is there anyway of doing this?
Thanks
585
Background Events - Those events that require the interaction of end user are known as background events. Operating system interrupts, hardware or software failure, timer expires, an operation completion are the example of background events.
You can change the color of all events on the calendar like so: var calendar = new Calendar(calendarEl, { events: [ // my event data ], eventColor: '#378006' }); You can use any of the CSS color formats such #f00 , #ff0000 , rgb(255,0,0) , or red .
A Background Event triggers a change in the background source across one or more Zones. Two tabs appear after a Background Event has been added to the Scheduler: the Timing Tab and the Background Tab.
Here is an example of how to specify an array of events: var calendar = new Calendar(calendarEl, { events: [ { title : 'event1', start : '2010-01-01' }, { title : 'event2', start : '2010-01-05', end : '2010-01-07' }, { title : 'event3', start : '2010-01-09T12:30:00', allDay : false // will make the time show } ] });
The editable property of a calendar determines whether the events on it can be modified. However, Background Events are not editable. They can not be dragged or resized.
Background events that are all-day will only be rendered in month view or the all-day slots of TimeGrid view.
Events that appear as background highlights can be achieved by setting an Event Object ’s display property to "background": Background events that are timed will only be rendered on the time slots in TimeGrid view. Background events that are all-day will only be rendered in month view or the all-day slots of TimeGrid view.
Background events that are timed will only be rendered on the time slots in agenda view. Background events that are all-day will only be rendered in month view or the all-day slots of agenda view.
I've modified the calendar's "eventRender" so that if an event detects a background rendering, also show the title:
eventRender: function (event, element) {
if (event.rendering == 'background') {
element.append(event.title);
}
}
You can use this code. try it.
eventRender: function(event, element){
if(event.source.rendering == 'background'){
element.append("YOUR HTML CODE");
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
