Disable weekend and enable days with Fullcalendar plugin Jquery

0

I'm using the fullcalendar.js plugin

How would you like to leave the weekends disabled and also leave enabled only 15 days counting today's date?

I have this code with the fullcalendar.js plugin

JS

$(document).ready(function() {
    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'agendaWeek,agendaDay'
        },
        defaultView: 'agendaWeek',
        editable: true,
        selectable: true,
        allDaySlot: false,
        weekends: false,
        validRange: {
            start: moment().day(), // data atual
            end: moment().add(15, 'days') // data atual + 14 (15 com a data atual)
        },
        viewRender: function(i) {
            var ini = moment();
            if (ini >= i.start && ini <= i.end) {
                $(".fc-prev-button")
                    .prop('disabled', true)
                    .addClass('fc-state-disabled');
            } else {
                $(".fc-prev-button")
                    .removeClass('fc-state-disabled')
                    .prop('disabled', false);
            }
        },

        events: "index.php?view=1",


        eventClick: function(event, jsEvent, view) {
            endtime = $.fullCalendar.moment(event.end).format('h:mm');
            starttime = $.fullCalendar.moment(event.start).format('dddd, MMMM Do YYYY, h:mm');
            var mywhen = starttime + ' - ' + endtime;
            $('#modalTitle').html(event.title);
            $('#modalWhen').text(mywhen);
            $('#eventID').val(event.id);
            $('#calendarModal').modal();
        },

        //header and other values
        select: function(start, end, jsEvent) {
            endtime = $.fullCalendar.moment(end).format('h:mm');
            starttime = $.fullCalendar.moment(start).format('dddd, MMMM Do YYYY, h:mm');
            var mywhen = starttime + ' - ' + endtime;
            start = moment(start).format();
            end = moment(end).format();
            $('#createEventModal #startTime').val(start);
            $('#createEventModal #endTime').val(end);
            $('#createEventModal #when').text(mywhen);
            $('#createEventModal').modal('toggle');
        },
        eventDrop: function(event, delta) {
            $.ajax({
                url: 'index.php',
                data: 'action=update&title=' + event.title + '&start=' + moment(event.start).format() + '&end=' + moment(event.end).format() + '&id=' + event.id,
                type: "POST",
                success: function(json) {
                    //alert(json);
                }
            });
        },
        eventResize: function(event) {
            $.ajax({
                url: 'index.php',
                data: 'action=update&title=' + event.title + '&start=' + moment(event.start).format() + '&end=' + moment(event.end).format() + '&id=' + event.id,
                type: "POST",
                success: function(json) {
                    //alert(json);
                }
            });
        }
    });

    $('#submitButton').on('click', function(e) {
        // We don't want this to act as a link so cancel the link action
        e.preventDefault();
        doSubmit();
    });

    $('#deleteButton').on('click', function(e) {
        // We don't want this to act as a link so cancel the link action
        e.preventDefault();
        doDelete();
    });

    function doDelete() {
        $("#calendarModal").modal('hide');
        var eventID = $('#eventID').val();
        $.ajax({
            url: 'index.php',
            data: 'action=delete&id=' + eventID,
            type: "POST",
            success: function(json) {
                if (json == 1)
                    $("#calendar").fullCalendar('removeEvents', eventID);
                else
                    return false;


            }
        });
    }

    function doSubmit() {
        $("#createEventModal").modal('hide');
        var title = $('#title').val();
        var startTime = $('#startTime').val();
        var endTime = $('#endTime').val();

        $.ajax({
            url: 'index.php',
            data: 'action=add&title=' + title + '&start=' + startTime + '&end=' + endTime,
            type: "POST",
            success: function(json) {
                $("#calendar").fullCalendar('renderEvent', {
                        id: json.id,
                        title: title,
                        start: startTime,
                        end: endTime,
                    },
                    true);
            }
        });

    }
});

You are not leaving the 15 days enabled with today's date

header:{
                left: 'prev,next today',
                center: 'title',
                right: 'agendaWeek,agendaDay'
            },
            defaultView: 'agendaWeek',
            editable: true,
            selectable: true,
            allDaySlot: false,
            weekends: false,
            validRange: {
   start: moment().day(),         // data atual
   end:  moment().add(15, 'days') // data atual + 14 (15 com a data atual)
},
viewRender: function(i){
   var ini = moment();
   if(ini >= i.start && ini <= i.end){
      $(".fc-prev-button")
      .prop('disabled', true) 
      .addClass('fc-state-disabled'); 
   }else{
      $(".fc-prev-button")
      .removeClass('fc-state-disabled')
      .prop('disabled', false); 
   }
},
    
asked by anonymous 05.10.2018 / 05:32

1 answer

1

To hide the weekends use the option:

weekends: false,

To start from the current date use the option:

firstDay: moment().day(),

To set the number of days (in the case 15 days ahead counted with the current date) use the option:

validRange: {
   start: moment().day(),         // data atual
   end:  moment().add(15, 'days') // data atual + 14 (15 com a data atual)
},

But you also have to disable the arrow that goes back to days before the current date. To do this, use the viewRender option function. It checks if the view of the calendar is greater than the week of the current date and disables or enables the arrow (changing the class) to view dates prior to the current date:

viewRender: function(i){
   var ini = moment();
   if(ini >= i.start && ini <= i.end){
      $(".fc-prev-button")
      .prop('disabled', true) 
      .addClass('fc-state-disabled'); 
   }else{
      $(".fc-prev-button")
      .removeClass('fc-state-disabled')
      .prop('disabled', false); 
   }
},
    
05.10.2018 / 07:40