CODEWITHSUNDEEP
javascriptjqueryfullcalendar
Sambero
Sambero

Reputation: 23

JS Fullcalendar how to disable allDay events?

I don't want user to be able to create allDay events in my calendar. I want calendar to change view from month view to agendaDay view by clicking the date, but everytime when I click the date calendar changes the view to agendaDay but it tries to create an allDay event.

$('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
    dayClick: function(date,allDay, jsEvent, view) {
        if (allDay) {
            // Clicked on the entire day
            $('#calendar').fullCalendar('gotoDate',date)
            $('#calendar').fullCalendar('changeView', 'agendaDay')
        }
        view = $('#calendar').fullCalendar('getView');
    },
    selectable: function(){
        if(view.name=='agendaDay'  ){
            return true;  
        }else{
            return false;
        }
    }, 
    selectHelper: true,
    select: function(start, end) {
        var title = prompt('Event Title:');
        var eventData;
        if (title) {
            eventData = {
                title: title,
                start: start,
                end: end,
            };
            $('#calendar').fullCalendar('renderEvent', eventData, true);
        }
        $('#calendar').fullCalendar('unselect');
    }
});

Upvotes: 2

Views: 5548

Answers (1)

mdxs
mdxs

Reputation: 147

You're handling dayClick, selectable and select; whereas this could be achieved by only handling select:

 select: function(start, end, jsEvent, view) {
    if (view.name=='month') {
        $('#calendar').fullCalendar('changeView', 'agendaDay');
        $('#calendar').fullCalendar('gotoDate', start)
    } else {
        var title = prompt('Event Title:');
        var eventData;
        if (title) {
            eventData = {
                title: title,
                start: start,
                end: end
            };
            $('#calendar').fullCalendar('renderEvent', eventData, true);
        }
    }
    $('#calendar').fullCalendar('unselect');
}

See http://jsfiddle.net/wijgerden/t81qtupz/ for a JSFiddle demo using FullCalendar v2.1.1; note that this still allows users to create all-day events on the agendaWeek and agendaDay views. On month view selecting date(s) will switch the view to agendaDay (first day in case of multi-select), while still allowing clicking on events.

Upvotes: 2

Related Questions