Как сделать прошедшую дату недоступной в fullcalendar?
Проблема заключается в том, как отключить выбор в PAST DATES в режиме полнокалендарного месяца/недели.
Я хочу, чтобы пользователю не разрешалось нажимать/выбирать последние даты.
![enter image description here]()
Вот некоторые фрагменты кода для Google, которые я пытаюсь реализовать при рендеринге событий:
selectable: true,
selectHelper: false,
select: function(start, end, allDay) {
var appdate = jQuery.datepicker.formatDate('<?php echo $DPFormat; ?>', new Date(start));
jQuery('#appdate').val(appdate);
jQuery('#AppFirstModal').show();
},
eventRender: function(event, element, view)
{
var view = 'month' ;
if(event.start.getMonth() !== view.start.getMonth()) { return false; }
},
Но он не работает, хотя.
Я тоже попробовал CSS CSS, и это поможет мне скрыть только текст даты, но selectable все еще работает в окне lastdate.
.fc-other-month .fc-day-number {
display:none;
}
Я действительно застрял в этой проблеме. Пожалуйста, помогите мне.
Спасибо...
Ответы
Ответ 1
Я сделал это в своем полном календаре, и он отлично работает.
вы можете добавить этот код в свою функцию выбора.
select: function(start, end, allDay) {
var check = $.fullCalendar.formatDate(start,'yyyy-MM-dd');
var today = $.fullCalendar.formatDate(new Date(),'yyyy-MM-dd');
if(check < today)
{
// Previous Day. show message if you want otherwise do nothing.
// So it will be unselectable
}
else
{
// Its a right date
// Do something
}
},
Надеюсь, это поможет вам.
Ответ 2
Мне нравится этот подход:
select: function(start, end) {
if(start.isBefore(moment())) {
$('#calendar').fullCalendar('unselect');
return false;
}
}
Он по существу отключит выделение по временам до "сейчас".
Отменить выбор
Ответ 3
Благодаря этому ответу, я нашел решение ниже:
$('#full-calendar').fullCalendar({
selectable: true,
selectConstraint: {
start: $.fullCalendar.moment().subtract(1, 'days'),
end: $.fullCalendar.moment().startOf('month').add(1, 'month')
}
});
Ответ 4
Вы можете комбинировать:
-крытый текст CSS, как упоминалось в вопросе
- отключить кнопку PREV в текущем месяце
- отметьте дату в dayClick/eventDrop и т.д.:
dayClick: function(date, allDay, jsEvent, view) {
var now = new Date();
if (date.setHours(0,0,0,0) < now.setHours(0,0,0,0)){
alert('test');
}
else{
//do something
}
}
Ответ 5
В FullCalendar v3.0 есть свойство selectAllow:
selectAllow: function(info) {
if (info.start.isBefore(moment()))
return false;
return true;
}
Ответ 6
Я попробовал этот подход, работает хорошо.
$('#calendar').fullCalendar({
defaultView: 'month',
selectable: true,
selectAllow: function(select) {
return moment().diff(select.start) <= 0
}
})
Наслаждайтесь!
Ответ 7
ниже - это решение, которое я использую сейчас:
select: function(start, end, jsEvent, view) {
if (moment().diff(start, 'days') > 0) {
$('#calendar').fullCalendar('unselect');
// or display some sort of alert
return false;
}
Ответ 8
Нет необходимости в длинной программе, просто попробуйте это.
checkout.setMinSelectableDate(Calendar.getInstance().getTime());
Calendar.getInstance().getTime()
Дает нам текущую дату.
Ответ 9
В fullcalendar 3.9 вы можете предпочесть параметр validRange function parameter
:
validRange: function(nowDate){
return {start: nowDate} //to prevent anterior dates
},
Недостаток: это также скрывает события до этой даты
Ответ 10
Это то, что я сейчас использую
Также добавлена функция .add(), чтобы пользователь не мог добавить событие в один и тот же час.
select: function(start, end, jsEvent, view) {
if(end.isBefore(moment().add(1,'hour').format())) {
$('#calendar').fullCalendar('unselect');
return false;
}
Ответ 11
*You can use this*
var start_date= $.fullCalendar.formatDate(start,'YYYY-MM-DD');
var today_date = moment().format('YYYY-MM-DD');
if(check < today)
{ alert("Back date event not allowed ");
$('#calendar').fullCalendar('unselect'); return false
}
Ответ 12
Я использовал опцию validRange
.
validRange: { start: Date.now(), end: Date.now() + (7776000)//sets end dynamically to 90 days after now (86400*90) }
Ответ 13
В Fullcalendar я достиг этого благодаря событию dayClick. Я думал, что это простой способ сделать это.
Вот мой код..
dayClick: function (date, cell) {
var current_date = moment().format('YYYY-MM-DD')
// date.format() returns selected date from fullcalendar
if(current_date <= date.format()) {
//your code
}
}
Надеюсь, что это помогает прошлым и будущим датам будет невозможно выбрать..
Ответ 14
если какой-либо ответ не работает для вас, попробуйте это, я надеюсь, что это работает для вас.
select: function(start, end, allDay) {
var check = formatDate(start.startStr);
var today = formatDate(new Date());
if(check < today)
{
console.log('past');
}
else
{
console.log('future');
}
}
а также создать функцию для формата даты, как показано ниже
function formatDate(date) {
var d = new Date(date),
month = '' + (d.getMonth() + 1),
day = '' + d.getDate(),
year = d.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
return [year, month, day].join('-');
}
я перепробовал все вышеперечисленные вопросы, но не работал для меня
Вы можете попробовать это, если для вас подойдет любой другой ответ.
Спасибо
Ответ 15
Приведенные ответы уже в порядке...
Тем не менее, официальная документация предлагает более краткое решение:
Сначала установите день, когда вы хотите быть нижней границей
var today = new Date().toISOString().slice(0,10);
Затем включите диапазон с помощью validRange
. Просто опустите дату end
.
validRange: {
start: today
},
select: function(info) {
//do stuff
}