Выделите определенные дни

Question

Я хочу, чтобы выделить определенные дни (полученный с помощью корма AJAX я могу спроектировать по своему вкусу), а затем быть в состоянии захватить событие нажатия на такие дни:

Я имел посмотрите на events handler, но он явно предназначен для отображения отдельных событий, и я не уверен, можно ли его настроить, чтобы делать то, что я хочу. Можете ли вы найти способ просто добавить имя класса в эти дни, а затем создать его с помощью CSS?

Я использую FullCalendar v2.3.2 (обновление не является вариантом, потому что оно уже используется по всему сайту).

Answer 1

Я изменил, чтобы сделать притворный вызов ajax. В основном ждет 1 секунду, как если бы выполнял вызов ajax и т. Д., А затем повторно снимал.

Единственное, что нехорошо, это то, как я сделал обновление, возможно, будет лучший способ. Метод рендеринга не повторно отображает представление.

Затем вы можете изменить, чтобы делать другие вещи, от данных, которые вы получаете от ajax.

var dtoday = moment().dayOfYear(); 
 
var days = []; 
 

 
function pretendAjax() { 
 
    setTimeout(function() { 
 
    days = [dtoday - 2, dtoday + 2]; 
 
    //force calendar refresh, there might be a better 
 
    //way than below, but will do for now 
 
    $('#calendar').fullCalendar('changeView','basicWeek'); 
 
    $('#calendar').fullCalendar('changeView','month'); 
 
    }, 1000); 
 
} 
 

 

 
$('#calendar').fullCalendar({ 
 
    dayRender: function (date, cell) { 
 
    var dofyear = date.dayOfYear(); 
 
    if (days.indexOf(dofyear) >= 0) { 
 
     cell.css({backgroundColor: 'pink'}); 
 
    } 
 
    }, 
 
}); 
 

 
pretendAjax();

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script> 
 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css' /> 
 

 

 
<div id='calendar'></div>

Answer 2

Я сочинил этот безобразный хак, который является главным доказательством на концепции, которая показывает свое глубокое невежество FullCalendar API и до сих пор нуждается в большом количестве оптимизации (например, мы должны удалить ссылки к клеткам, которые больше не существуют).

Я злоупотребляю начальным dayRender выполнением для хранения ячеек в пользовательской переменной. Затем я могу получить доступ к этой переменной по своему вкусу и применить любую функцию jQuery по своему выбору к связанной ячейке, которая является хорошим старым объектом jQuery.

var days = {}; 
 
$('#calendar').fullCalendar({ 
 
    dayRender: function (date, cell) { 
 
     days[date.toISOString()] = cell; 
 
    }, 
 
    events: function(start, end, timezone, callback){ 
 
     // Emulated AJAX response 
 
     var data = [ 
 
      start.add(1, "days").format("YYYY-MM-DD"), 
 
      start.add(2, "days").format("YYYY-MM-DD"), 
 
      start.add(5, "days").format("YYYY-MM-DD") 
 
     ]; 
 
     $.map(data, function(elementOfArray){ 
 
      days[elementOfArray].addClass("has-stuff"); 
 
      callback([]); 
 
     }); 
 
    } 
 
});

.has-stuff { 
 
    background-color: yellow !important; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.15.2/moment.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.js"></script> 
 
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.0.1/fullcalendar.min.css' /> 
 

 

 
<div id='calendar'></div>

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

Кредиты отправляются в Кит для первоначального скелета скеплета, ошибки все мои.