Полный календарь ограничивает показ доступных месяцев? - PullRequest
8 голосов
/ 28 мая 2010

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

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

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

Ответы [ 9 ]

16 голосов
/ 21 августа 2014

Для 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();
            }
        }
  });
9 голосов
/ 12 марта 2012

Это основано на таурен ответ , но включает в себя необходимые математические и полные календарные селекторы даты для этого (этот код использует диапазон 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"); }
    }
});
4 голосов
/ 28 мая 2010

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

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

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

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

Кроме того, если пользователь находится в месяце, выходящем за пределы допустимого диапазона, вы можете немедленно выполнить команду 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
        }
    }
});

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

3 голосов
/ 01 мая 2017

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

$('#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'
            });
2 голосов
/ 23 октября 2013
            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();
                }

            }
1 голос
/ 25 июля 2013
 $('#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"); }
            }
0 голосов
/ 10 мая 2017

Мне очень понравился ответ Льюсида, но у него есть некоторые проблемы. Прежде всего, view.start - это Момент, а не дата, поэтому getMonth() не существует. Во-вторых, 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");
    }
}
0 голосов
/ 22 января 2014

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

Я только что добавил два if, которые вы можете использовать один или оба, или ни одного. Их цель - быть ориентированными на конкретный день, просто потому, что вы, например, разрешаете «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"); }
    }
});
0 голосов
/ 27 января 2011

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

  1. Добавьте указатель даты в div к левой стороне страницы, а fullCalendar - к правой.
  2. Установите startDate и endDate для диапазона дат вашей программы.
  3. Установите переменные minDate и maxDate в DatePicker, используя startDate и endDate для диапазона дат программы в DatePicker, чтобы затемнить все другие даты вне диапазона. Цель этого - дать пользователю подсказку остаться в диапазоне. Кроме того, я добавил некоторый код, чтобы при нажатии пользователем на дату в указателе даты день отображался в fullCalendar.
  4. В вашем пользовательском файле jQuery .js добавьте к методу fullCalendar для dayClick , который принимает дату в качестве переменной:

    if (+ date <+ jQuery.startDate || + date> jQuery.endDate) {

    var $ 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: false, модальный: правда, title: 'Date Out of Range', ширина: 600, кнопки: { "ОК": функция () { JQuery (это) .dialog ( "закрыть"); } } }) * * Тысяча двадцать-семь

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

    } else {

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

    }

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

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

    JQuery ( '# datepicker_for_calendar'). DatePicker ({ defaultDate: jQuery.startDate, minDate: jQuery.startDate, maxDate: jQuery.endDate, встроенный: верно, showButtonPanel: правда, onSelect: function (dateText, inst) { var d = новая дата (dateText); jQuery ('# calendar'). fullCalendar ('gotoDate', d); selectedDate = d; } });

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...