Disable weekend and enable days with Fullcalendar plugin Jquery

Asked

Viewed 977 times

-1

I’m using the plugin fullcalendar.js

How would you leave disabled weekends and also leave enabled only 15 days counting today’s date?

I have this code with the plugin fullcalendar.js

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

    }
});

Is not leaving enabled the 15 days counting 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); 
   }
},

2 answers

3

To hide 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 case 15 days forward 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 need to disable the arrow that goes back to days prior to the current date. For this use the option function viewRender. She checks whether the view calendar is larger than the current date week and disables or enables the arrow (changing 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); 
   }
},
  • Not leaving enabled the 15 days counting today date, I did as you said, I edited my question, look around please, the rest worked!

-2

selectConstraint: { start: $.fullCalendar.moment().subtract(1, 'hour'), end: $.fullCalendar.moment().startOf('now').add(15, 'day') }

Browser other questions tagged

You are not signed in. Login or sign up in order to post.