Fullcalendar ограничивает отображение доступных месяцев?

Question

Я хотел бы узнать, как я могу ограничить полнокалендарный показ трехмесячного периода и отменить выбор в течение оставшихся месяцев, например, в пределах даты?

E.g. Текущий месяц - май 2010 года. Мне бы хотелось, чтобы в календаре показывались май и апрель (при нажатии на предыдущий месяц), а в июне (при нажатии на следующий месяц) остальные месяцы будут отменены из выбора пользователя.

Я не уверен, пропустил ли я прочтение какой-либо детали в документации полного календаря. Добрый совет. Спасибо.

Answer 1

Я этого не сделал, поэтому я не уверен, что это сработает. Но вы могли бы хотя бы попробовать и посмотреть.

Я бы, вероятно, посмотрел на настройку обратного вызова viewDisplay. Он получает View Object, который содержит имущество start, среди прочих. Вы можете использовать свойства объекта «Вид» для проверки того, какой вид и дату, на которую смотрит пользователь, а затем выполнить действия на его основе.

Я не уверен, что fullcalendar работает таким образом, но некоторые плагины прекратят действие, если вы ответите return false. Таким образом, вы можете проверить дату start и, если она находится вне диапазона допустимых месяцев, то return false, чтобы прервать действие.

Если это не сработает, внутри viewDisplay вы можете снова проверить дату start. Если следующий месяц или предыдущий месяц выходят за допустимые пределы, вы можете использовать селектора jQuery, чтобы захватить кнопки prev/next и отключить их. Таким образом, пользователь не сможет переключиться на месяц вне диапазона.

Кроме того, если пользователь находится за пределами диапазона, вы можете немедленно отправить команду gotoDate, чтобы перейти к допустимому месяцу.

$('#calendar').fullCalendar({ 
    viewDisplay: function(view) { 
     // maybe return false aborts action? 
     if (view.start > lastDayOfNextMonth) { 
      return false; 
     } 
     // or disable next button if this is last valid month 
     if (view.end + oneDay >= lastValidDate) { 
      $("#calendar #fc-button-next").attr("disabled","disabled"); 
     } 
     // or gotoDate if view.start is out of range 
     if (view.start > lastValidDate) { 
      // gotoDate 
     } 
    } 
}); 

Существует множество способов сделать логику и математику даты там, но я думаю, что вы можете что-то сделать таким образом.

Answer 2

Я столкнулся с аналогичной ситуацией: у меня есть программа событий и вы хотели ограничить Fullcalendar диапазоном дат для событий (например, 12 недель). Итак, если сегодня на неделе 6, то в календаре отображаются только даты с 1 по 12, когда пользователь нажимает следующий или предыдущий. Я посмотрел на модификацию fullcalendar.js, но у меня нет времени, чтобы объединиться с моей временной шкалой проекта. Итак, как обходной путь здесь - это то, что я сделал:

1. Добавить datepicker в div в левой части страницы, с полным календарем справа.
2. Установите startDate и endDate для вашего диапазона дат программы.
3. Установите minDate и maxDate vars в datepicker, используя startDate и endDate для диапазона дат программы в datepicker, чтобы опустить все остальные даты за пределами диапазона. Цель этого - намек на то, чтобы пользователь оставался в диапазоне. Кроме того, я добавил код, чтобы, когда пользователь нажимает на дату в datepicker, день отображается в fullCalendar.

4. В пользовательских .js JQuery файлов, добавьте к методу fullCalendar для dayClick который принимает дату в качестве переменной:

   если (+ дата < + jQuery.startDate || + дата> JQuery.ENDDATE) {

   вар $ date_out_of_range_dialog = JQuery ('') .html ('

   К сожалению, вы выбрали даты находится за пределами диапазона дат для текущей программы

   Дата начала:.' + (JQuery. startDate.getMonth() + 1) + '/' + jQuery.startDate.getDate() + '/' + jQuery.startDate.getFullYear() + '

   Дата окончания:' + (jQuery.endDate.getMonth () + 1) '/' + jQuery.endDate.getDate() + '/' + jQuery.endDate.getFullYear() + '

   ') .dialog ({ AutoOpen: ложь, модальное: правда, название : 'Date Out of Range', width: 600, buttons: { "Ok": function() { jQuery (это) .dialog ("close"); }} })

   $ date_out_of_range_dialog.dialog ('открытый');

   } еще {

   // сделать что-то другое, как просмотр/добавить/удалить событие в этот день в диапазоне.

   }

5. .dialog метод, чтобы открыть диалоговое окно от MooTools, но что-то подобное может быть использовано в JQuery. Я добавил jQuery. to startDate и endDate, чтобы vars были доступны через мой .js-файл.

6. Вот код для DatePicker выбрать дату и выберите на fullCalendar:.

   JQuery ('# datepicker_for_calendar') DatePicker ({ defaultDate: jQuery.startDate, MinDate: jQuery.startDate, MaxDate: jQuery.endDate, рядный: правда, showButtonPanel: правда, onSelect: функция (dateText, инст) { вар d = новая дата (dateText); JQuery ('# календарь') fullCalendar ('gotoDate'. , d); selectedDate = d; } });

Answer 3

Это основано на tauren «s answer, но включает в себя необходимую дату математику и fullcalendar селекторы, чтобы вытащить его (этот код использует диапазон 12 месяцев):

jQuery('#edit-calendar').fullCalendar({ 
    viewDisplay : function(view) { 
     var now = new Date(); 
     var end = new Date(); 
     end.setMonth(now.getMonth() + 11); //Adjust as needed 

     var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear(); 
     var cur_date_string = now.getMonth()+'/'+now.getFullYear(); 
     var end_date_string = end.getMonth()+'/'+end.getFullYear(); 

     if(cal_date_string == cur_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); } 
     else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); } 

     if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); } 
     else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); } 
    } 
}); 

Answer 4

$('#calendar').fullCalendar({ 
      viewDisplay : function(view) { 
       var now = new Date(); 
       var end = new Date(); 
       var begin = new Date(); 

       end.setMonth(now.getMonth() + 12); //Adjust as needed 
       begin.setMonth(now.getMonth() - 12); //Adjust as needed 

       var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear(); 
       var cur_date_string = now.getMonth()+'/'+now.getFullYear(); 
       var end_date_string = end.getMonth()+'/'+end.getFullYear(); 
       var begin_date_string = begin.getMonth()+'/'+begin.getFullYear(); 

       if(cal_date_string == begin_date_string) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); } 
       else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); } 

       if(end_date_string == cal_date_string) { jQuery('.fc-button-next').addClass("fc-state-disabled"); } 
       else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); } 
      } 

Answer 5

  var academicYearStartDate = new Date('2013/4/10'); 
      var academicYearEndDate = new Date('2014/4/10'); 

      viewDisplay: function (view) { 
       //========= Hide Next/ Prev Buttons based on academic year date range 
       if (view.end > academicYearEndDate) { 
        $("#SchoolCalender .fc-button-next").hide(); 
        return false; 
       } 
       else { 
        $("#SchoolCalender .fc-button-next").show(); 
       } 

       if (view.start < academicYearStartDate) { 
        $("#SchoolCalender .fc-button-prev").hide(); 
        return false; 
       } 
       else { 
        $("#SchoolCalender .fc-button-prev").show(); 
       } 

      } 

Answer 6

Моя очередь добавить настройки. Это, однако, основано на lewsid's answer, который включает в себя необходимые математические пары даты и полные календарные селектора, чтобы вытащить его, но с завихрением.

Я только что добавил два, если вы можете выбрать один или оба, или ничего. Цель их - быть конкретным днем, только потому, что вы позволяете, например, «2 месяца» вперед и назад, если вы находитесь в неделю. «Сегодня» + 2 месяца могут быть отключены, а также после того, как вы продвигаетесь вперед вам может быть запрещено возвращаться к «Сегодня».

jQuery('#edit-calendar').fullCalendar({ 
    viewDisplay : function(view) { 
     var now = new Date(); 
     var end = new Date(); 
     end.setMonth(now.getMonth() + 2); //Adjust as needed 

     var cal_date_string = view.start.getMonth()+'/'+view.start.getFullYear(); 
     var cur_date_string = now.getMonth()+'/'+now.getFullYear(); 
     var end_date_string = end.getMonth()+'/'+end.getFullYear(); 
     // TWEAK: Day Specific Vars 
     var cal_date_month_day = parseInt(view.start.getDate()); 
     var cur_date_month_day = parseInt(now.getDate()); 

     // TWEAK: Only Disable if I can see today! 
     if(cal_date_string == cur_date_string && cal_date_month_day <= cur_date_month_day) { jQuery('.fc-button-prev').addClass("fc-state-disabled"); } 
     else { jQuery('.fc-button-prev').removeClass("fc-state-disabled"); } 
     // TWEAK: Only Disable if I really did reach "Today" + months 
     if(end_date_string == cal_date_string && cal_date_month_day >= cur_date_month_day) { jQuery('.fc-button-next').addClass("fc-state-disabled"); } 
     else { jQuery('.fc-button-next').removeClass("fc-state-disabled"); } 
    } 
}); 

Answer 7

Для FullCalendar в версии 2 изменения viewDisplay : function(view) { к viewRender: function(view,element) { (смешанный раствор из примеров на этой странице):

$('#calendar').fullCalendar({ 

     //restricting available dates to 2 moths in future 
     viewRender: function(view,element) { 
      var now = new Date(); 
      var end = new Date(); 
      end.setMonth(now.getMonth() + 2); //Adjust as needed 

      if (end < view.end) { 
       $("#calendar .fc-next-button").hide(); 
       return false; 
      } 
      else { 
       $("#calendar .fc-next-button").show(); 
      } 

      if (view.start < now) { 
       $("#calendar .fc-prev-button").hide(); 
       return false; 
      } 
      else { 
       $("#calendar .fc-prev-button").show(); 
      } 
     } 
    }); 

Answer 8

вы можете использовать опцию

$('#calendar').fullCalendar({ 
      header: { 
       left: 'prev,next today', 
       center: 'title', 
       right: 'month,agendaWeek,agendaDay' 
      }, 
      validRange: { 
       start: '2017-05-01',//start date here 
       end: '2017-07-01' //end date here 
      }, 
      defaultDate: '2017-05-12' 
      }); 

Answer 9

мне понравился ответ lewsid в много, но у него есть некоторые проблемы. Прежде всего, view.start - это Момент, а не дата, поэтому getMonth() не существует. Во-вторых, View start - это только первый видимый день в этом месяце, что означает, что дата может быть от предыдущего месяца. Чтобы обойти это, используйте его свойство intervalStart.

Вот моя реализация, чтобы получить календарь для отображения текущего года.

viewRender: function(view, element) { 
    var now = new Date(new Date().getFullYear(), 0, 1); 
    var end = new Date(new Date().getFullYear(), 11, 31); 

    var calDateString = view.intervalStart.month()+'/'+view.intervalStart.year(); 
    var curDateString = now.getMonth()+'/'+now.getFullYear(); 
    var endDateString = end.getMonth()+'/'+end.getFullYear(); 

    if (calDateString === curDateString) { 
     jQuery('.fc-prev-button').addClass("fc-state-disabled"); 
    } else { 
     jQuery('.fc-prev-button').removeClass("fc-state-disabled"); 
    } 

    if (endDateString === calDateString) { 
     jQuery('.fc-next-button').addClass("fc-state-disabled"); 
    } else { 
     jQuery('.fc-next-button').removeClass("fc-state-disabled"); 
    } 
}