Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

fullCalendar V2 background events title

Tags:

fullcalendar

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

like image 585
jimbodeni Avatar asked Nov 24 '14 10:11

jimbodeni


People also ask

Which is an example of background event?

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.

How do I change the background color of an event in fullCalendar?

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 .

What is background event?

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.

How do I set events in fullCalendar?

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 } ] });

What is the editable property of a calendar?

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.

Can background events that are all-day be rendered in month view?

Background events that are all-day will only be rendered in month view or the all-day slots of TimeGrid view.

How do I add background events to my events?

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.

How do background events work in agenda 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.


2 Answers

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);
    }
}
like image 198
Shroombaker Avatar answered Sep 16 '22 18:09

Shroombaker


You can use this code. try it.

eventRender: function(event, element){
    if(event.source.rendering == 'background'){
        element.append("YOUR HTML CODE");
    }
}
like image 20
Shirox Avatar answered Sep 20 '22 18:09

Shirox