[英]How to compare dates in full calendar
I have a dates stored in my database which I would like to compare with the elements of the calendar to change the background color of the days 我有一个存储在数据库中的日期,我想将其与日历元素进行比较以更改日期的背景色
{
"success": true,
"disponibilidad": [
{
"slot_date": "2017-06-08"
},
{
"slot_date": "2017-06-09"
},
{
"slot_date": "2017-06-10"
},
{
"slot_date": "2017-06-11"
},
{
"slot_date": "2017-06-12"
}
]
}
I tried to use jquery, and it works in a certain way, but the load time is too slow and too little optimum, in addition, if I change the month, a problem arises to color the days, my question is, is there a way to pass that array Of dates within dayRender? 我尝试使用jquery,并且它以某种方式工作,但是加载时间太慢且最优值太小,此外,如果我更改月份,则会出现着色日期的问题,我的问题是,是否存在在dayRender中传递日期数组的方法?
the method that I had used 我使用的方法
$('#calendar').fullCalendar({
dayClick: function() {
//alert("dia presionado");
selectedDate = $(this).attr("data-date");
alert($(this).attr("data-date"));
//window.location.href="/reservation/"+selectedDate;
$('#calendar').fullCalendar('gotoDate', $(this).attr("data-date"));
},
dayRender: function(date, cell) {
$.ajax({
type: "get",
url: '/getFaq',
dataType: 'json',
success: function(data) {
var valores = [];
valores[0] = "2017-06-27";
valores[1] = "2017-06-28";
for (var i = 0; i <= 1; i++) {
if (date.format() == valores[i]) {
cell.css("background-color", "red");
}
}
},
error: function(response) {},
});
}})
*Edit *编辑
I have embed the code using data properties, however, for some reason I can not use the variable within the dayrender, in the dayclick if it works 我已经使用数据属性嵌入了代码,但是由于某种原因,我无法在dayrender中使用变量,在dayclick中可以使用
success: function(data)
{
myArray= new Array(data.disponibilidad.length);
for(var i=0;i<data.disponibilidad.length;i++)
{
myArray[i]=data.disponibilidad[i].slot_date;
}
$( "body" ).data( "array",myArray);
//for(var k=0; k< myArray.length;k++)
//console.log($( "body" ).data( "array" ));
//console.log(myArray);
}
$('#calendar_make_a_reservation').fullCalendar({
height: 500,
dayClick: function() {
$('#modal_appointment_time').modal('open');
/*
var array=$( "body" ).data( "array" );
console.log(array);*/
},
dayRender: function (date, cell) {
var array=$( "body" ).data( "array" );
console.log(array);
/*
myArray.forEach(function (item) {
if (date._d.getDate() == item.getDate() && date._d.getMonth() == item.getMonth())
{
$(cell).toggleClass('selected');
}
});*/}
})
In dayrender returns me "undefined" 在Dayrender中返回“未定义”
I was able to solve it, the problem with dayrender was due to synchronization, once the async is changed to false, everything works perfectly. 我能够解决它,dayrender的问题是由于同步造成的,一旦异步更改为false,一切都会正常运行。
$.ajax({
async:false,
cache:false,
dataType: 'json',
type: 'get',
url: 'getReservas',
data:params,
success: function(data)
{
myArray= new Array(data.disponibilidad.length);
for(var i=0;i<data.disponibilidad.length;i++)
{
myArray[i]=data.disponibilidad[i].slot_date;
}
alert("segundo");
var array=$( "body" ).data("array",myArray);
//for(var k=0; k< myArray.length;k++)
//console.log($( "body" ).data( "array" ));
//console.log(myArray);
},
error: function(data){
alert("ha ocurrido un error") ;
}
});
$('#calendar_make_a_reservation').fullCalendar({
height: 500,
dayClick: function() {
$('#modal_appointment_time').modal('open');
//console.log($( "body" ).data("array"));
},
dayRender: function (date, cell) {
myArray.forEach(function (item) {
if (date.format()==item)
{
cell.css("background-color", "blue");
}
});
}
})
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.