FullCalendar only allow one selectable slot

Question

Good day

I am using FullCalendar.js for rendreing a Calendar on my form. My requirement is that the user only is allowed to select one slot on the calendar. They're allowed to select multiple slots from different days but, not within the same day.

Also the duration of the slot they can select is maximum of 1 hour and no less than.

I've figured out the latter (allowing a maximum of 1 hour slot that can be selected) however for the life of me, I can't figure out how to "unselect" a previous time selected if a new slot is selected within the same day.

Here's my code:

 $('#calendar').fullCalendar({
        header:{
            left:   '',
            center: '',
            right:  ''
        },
        columnFormat: {
        week: 'ddd'
        },
        selectable:true,
        selectHelper: true,
        editable: false,

        eventStartEditable : false,
        allDaySlot: false,
        defaultView: 'agendaWeek',
        slotDuration:'01:00:00',
        allDay: false,
        slotEventOverlap: false,
        dayClick: function(date,JSevent, view) {

               //$(this).fullCalendar('unselect');

               console.log("I am hereerer");

                $('#calendar').fullCalendar('clientEvents', function(event) {

                   console.log(date);

                   console.log(event.start);
                   console.log(event.end);

                    if(event.start <= date && event.end >= date) {
                        return true;
                    }
                    return false;
                });
        },
        select:function(start, end)
        {
            var minutes = end.diff(start,"minutes");
            $('#calendar').fullCalendar('unselect');
            if(minutes===60)
            {
                $('#calendar').fullCalendar('renderEvent', {
                    start: start,
                    end: end,
                    allDay: false
                },
                 true 
                );
            }

        }
    });

Varsha Mittal Varsha Mittal · Accepted Answer · 2018-08-03T09:36:04

Here you go:

   <script>

        $(document).ready(function () {
            var appointments = 0;
            function makeid() {
                var text = "";
                var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

                for (var i = 0; i < 11; i++)
                    text += possible.charAt(Math.floor(Math.random() * possible.length));

                return text;
            }

            $("#form_id").val(makeid());
            var calendar = $('#calendar').fullCalendar({
                editable: true,
                slotDuration: '00:20:00',
                defaultView: 'agendaWeek',
                allDaySlot: false,
                eventConstraint: {
                    start: '00:00', // a start time (start of the day in this example)
                    end: '24:00', // an end time (end of the day in this example)
                },
                header: {
                    left: 'prev,next today',
                    center: 'title',
                    right: 'month,agendaWeek,agendaDay'
                },
                events: 'load.php?id=' + $("#form_id").val(),
                eventRender: function (event, element) {
                    if (!event.editable) {
                        element.addClass('fc-event-non-editable');
                        element.draggable = false;
                    }
                },
                eventOverlap: false,
                selectable: true,
                selectHelper: true,
                select: function (start, end, allDay, revertFunc)
                {
                    var myDate = new Date();
                    myDate.setDate(myDate.getDate() - 1);
                    var eventData = {
                        start: start,
                        end: end
                    };
                    if (appointments < 3) {
                        if (start >= myDate.getTime()) {
                            var title = prompt("Enter Event Title");
                            if (title)
                            {
                                var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                                var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
                                $.ajax({
                                    url: "insert.php",
                                    type: "POST",
                                    data: {title: title, start: start, end: end, user_id: $("#form_id").val()},
                                    success: function ()
                                    {
                                        alert("Added Successfully");
                                        $('#calendar').fullCalendar('unselect');
                                        $('#calendar').fullCalendar('refetchEvents');
                                        appointments++;
                                    }
                                })
                            }
                        } else {
                            alert('It is not possible to book an appointment prior to today.');
                            $('#calendar').fullCalendar('renderEvent', eventData, true);
                        }
                    } else {
                        alert("You can select maximum of 3 dates!");
                    }
                },
                eventResize: function (event, delta, revertFunc)
                {
                    if ((event.end - event.start) <= '3600000') {
                        var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                        var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                        var title = event.title;
                        var id = event.id;
                        $.ajax({
                            url: "update.php",
                            type: "POST",
                            data: {title: title, start: start, end: end, id: id},
                            success: function () {
                                calendar.fullCalendar('refetchEvents');
                                alert('Event Update');
                            }
                        });
                    } else {
                        revertFunc();
                        alert("Appointment could be of maximum 1:30 hrs.");
                    }
                },

                eventDrop: function (event)
                {
                    var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
                    var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
                    var title = event.title;
                    var id = event.id;
                    $.ajax({
                        url: "update.php",
                        type: "POST",
                        data: {title: title, start: start, end: end, id: id},
                        success: function ()
                        {
                            calendar.fullCalendar('refetchEvents');
                            alert("Event Updated");
                        }
                    });
                },

                eventClick: function (event)
                {
                    if (event.editable) {
                        if (confirm("Are you sure you want to remove it?"))
                        {
                            var id = event.id;
                            $.ajax({
                                url: "delete.php",
                                type: "POST",
                                data: {id: id},
                                success: function ()
                                {
                                    calendar.fullCalendar('refetchEvents');
                                    alert("Event Removed");
                                    appointments--;
                                }
                            })
                        }
                    }
                },
                dayRender: function (date, cell) {
                    var myDate = new Date();
                    myDate.setDate(myDate.getDate() - 1);
                    if (date < myDate) {
                        $(cell).addClass('disabled');
                    }
                },
                viewRender: function (view, element) {
                    // Drop the second param ('day') if you want to be more specific
                    if (moment().isAfter(view.intervalStart, 'day')) {
                        $('.fc-prev-button').addClass('fc-state-disabled');
                    } else {
                        $('.fc-prev-button').removeClass('fc-state-disabled');
                    }
                }
            });
        });

    </script>

FullCalendar only allow one selectable slot

1 Answers