如果在fullcalendar jquery中取消选择日期，如何更改颜色 [英] How to change color if date deselected in fullcalendar jquery

问题描述

大家好，



我正在使用FullCalendar Jquery。



当用户选择日期时，它在日历中显示浅绿色。



但是当取消选择/删除日期时，会显示取消选择，而是显示为

已选中。

Hi guys,

I'm using FullCalendar Jquery.

When user select date, it shows light green color in calendar.

But when deselect/remove date, it is show getting deselected, instead its shows as
selected.

HTML CODE:
<div id='calendar'></div>

我的尝试：

What I have tried:

JQUERY CODE: 

 var dates = new Array();

    function addDate(date) {
        if (jQuery.inArray(date, dates) < 0) dates.push(date);
    }

    function removeDate(index) {
        dates.splice(index, 1);
    }

    function printArray() {
        var printArr="";
        dates.forEach(function (val) {
            printArr += val + ',';
            
        });
        printArr =  printArr.slice(0, -1) ;
        var myArr = printArr.split(",");
        alert(myArr.sort());
    }
    // Adds a date if we don't have it yet, else remove it
    function addOrRemoveDate(date) {
        
        var index = jQuery.inArray(date, dates);
        if (index >= 0)
            removeDate(index);
        else
            addDate(date);

        printArray();
    }

    // Takes a 1-digit number and inserts a zero before it
    function padNumber(number) {
        var ret = new String(number);
        if (ret.length == 1) ret = "0" + ret;
        return ret;
    }
$('#calendar').fullCalendar({
    header: {
        left: 'prev,next today',
        center: 'title',
        right: 'month,agendaWeek,agendaDay'
    },
    defaultView: 'month',
    events: [{
        start: '2014-11-12T13:00:00',
        end: '2014-11-12T16:00:00',
    }, ],
    selectable: true,
    select: function (start, end, jsEvent, view) {
            addOrRemoveDate(start.format());
        $("#calendar").fullCalendar('addEventSource', [{
            start: start,
            end: end,
            rendering: 'background',
            block: false,
        }, ]);
    },
    selectOverlap: function(event) {
        return ! event.block;
    }
});

请参阅小提琴：



我想要删除取消选择时的颜色。



请各位帮帮我。





谢谢

plz ref the fiddle:

I want to remove the color when its deselected.

Please guys help me.


Thanks

推荐答案

（'＃calendar'）。fullCalendar（{
header：{
left：'prev，next today'，
center：'title'，
right：'month，agendaWeek，agendaDay'
}，
defaultView：'month'，
events：[{
开始：'2014-11-12T13：00：00'，
结束：'2014-11-12T16：00：00'，
}，]，
可选：true，
select：function（start，end，jsEvent，view）{
addOrRemoveDate（start.format（））;

('#calendar').fullCalendar({ header: { left: 'prev,next today', center: 'title', right: 'month,agendaWeek,agendaDay' }, defaultView: 'month', events: [{ start: '2014-11-12T13:00:00', end: '2014-11-12T16:00:00', }, ], selectable: true, select: function (start, end, jsEvent, view) { addOrRemoveDate(start.format());

（＃calendar）。fullCalendar（' addEventSource'，[{
start：start，
end：end，
rendering：'background'，
block：false，
}，]）;
}，
selectOverlap：function（event）{
return！ event.block;
}
}）;

("#calendar").fullCalendar('addEventSource', [{ start: start, end: end, rendering: 'background', block: false, }, ]); }, selectOverlap: function(event) { return ! event.block; } });

plz ref the fiddle：



我想在取消选择时删除颜色。< br $> b $ b

请各位帮帮我。





谢谢

plz ref the fiddle:

I want to remove the color when its deselected.

Please guys help me.


Thanks

它在jquery日历CSS文件中，你需要将颜色修改为无。

你可以按照以下步骤操作：

1.选择你的来自某个调试器的控件（如Firebug或crome的默认调试器）

2.将该属性的color属性设置为none，或者为该特定控件的名称或类或Id。

3.此外，您可以编写自己的css类并将该类附加到您的控件上。

Its in jquery calendar CSS file, in which you need to modify the color to none.
You can follow the steps:
1. Select your control from some debugger (Like Firebug or crome's default debugger)
2. Set the color property to none for that particular control's name or class or Id .
3. Also you can write your own css class and attach that class with your control.

这篇关于如果在fullcalendar jquery中取消选择日期，如何更改颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！