我有一个完整的日历和数据表来执行一些功能。我有一个完整的日历、几个按钮和一个数据表来突出显示选定的日期。
起初，我有 2 个单独的按钮'Working day','off day'。如果我单击“休息日”按钮并在完整日历上选择特定日期（单元格），则必须更改该单元格背景并将所选日期添加到我的数据表中。同样，如果我选择“工作日”按钮，然后单击选定的休息日单元格，则单元格的颜色必须变回白色，并且必须从我的数据表中删除数据。这个对我来说很好用。
我还有一个按钮“加载日历”来突出显示选定年份的所有星期日，并将这 52 个数据添加到我的数据表中。这也对我有用。
问题是，在选择了一年之后，我需要添加单独的“休息日”按钮，或者需要删除几个突出显示的星期日到工作日——当我这样做时，只有日历单元格的颜色发生了变化——数据没有从数据中删除表，并且在多次单击“关闭/工作日”按钮时将重复数据添加到数据表中。
按钮代码：
<div class="btn-group">
<a id="btnWorkingDay" name="btnWorkingDay" class="@*external-event*@ btn btn-block btn-default btn-flat"><span class="hide-on-mobile">Working Day </span></a>
</div>
<div class="btn-group">
<a id="btnOffDay" name="btnOffDay" style="background-color:#1BBF2A;color:white" class="btn btn-block #1BBF2A btn-flat"><span class="hide-on-mobile">Off Day </span></a>
</div>
**Code for full calendar:**
<div class="box-body no-padding">
<div id="calendar_full"></div>
</div>
按钮加载全年的代码：
<div class="btn-group">
<a id="btnLoadCalendar" name="btnLoadCalendar" onclick="LoadCalendar1()" class="btn btn-block btn-success btn-flat"><span class="hide-on-mobile">Load Calendar </span><i class="fa fa-calendar"></i></a>
</div>
数据表代码：
<table cellspacing="1" cellpadding="2" style="width: 100%;" id="CalendarSelection" class="table table-striped table-hover table-bordered table-hd">
<thead>
<tr class="gridheader">
<td valign="middle" align="center" style="width: 2%;"></td>
<td style="width: 50%;" class="search_field" id="CalendarDate">Calendar Date</td>
<td style="width: 50%;" class="search_field" id="Description">Description</td>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
<td></td></tr></tbody>
</table>
脚本：
<script>
$(document).ready(function () {
var t = $('#CalendarSelection').DataTable({
"columnDefs": [{
"searchable": false,
"orderable": false,
"targets": 0
}],
});
t.on('order.dt search.dt', function () {
t.column(0, { search: 'applied', order: 'applied' }).nodes().each(function (cell, i) {
cell.innerHTML = i + 1;
});
});
});
$(function () {
var t = $('#CalendarSelection').DataTable();
var y = new Date().getFullYear();
t.clear().draw();
$('#calendar_full').fullCalendar('gotoDate', year);
select();
$('.fc-left').remove();
$('.select_month').addClass('hide');
$('.fc-today-button').addClass('hide');
$('.fc-prev-button').addClass('hide');
$('.fc-next-button').addClass('hide');
});
function select() {
var date = new Date()
$("#btnWorkingDay").click(function (event) {
event.preventDefault();
$(this).toggleClass("selected");
$("#btnOffday").removeClass("selected");
});
$("#btnOffday").click(function (event) {
event.preventDefault();
$(this).toggleClass("selected");
$("#btnWorkingDay").removeClass("selected");
});
$('#calendar_full').fullCalendar({
plugins: ['interaction'],
header: {
center: 'title'
},
selectable: true,
selectHelper: true,
dayClick: function (date, jsEvent, view) {
var t = $('#CalendarSelection').DataTable();
if (!$("#btnWorkingDay").hasClass("selected") && !$("#btnOffday").hasClass("selected"))
return;
var cell = $(this);
if ($("#btnWorkingDay").hasClass("selected")) {
var backgroundColour = 'white';
var description = '';
} else if ($("#btnOffday").hasClass("selected")) {
var backgroundColour = '#1BBF2A';
var description = 'Half Working Day';
}
cell
.css('background-color', backgroundColour)
.text(description);
if (($('tr[data-date="' + cell.data('date') + '"]').length > 0)) {
var data = t.row($('tr[data-date="' + cell.data('date') + '"]')).data();
if (cell.text() == '') {
t.row($('tr[data-date="' + cell.data('date') + '"]')).remove().draw();
return
}
else {
t
.row($('tr[data-date="' + cell.data('date') + '"]'))
.data([
null,
data[1],
cell.text()
]);
return;
}
}
else {
if (cell.text() == '') {
if ((cell.css('background-color', '#1BBF2A'))) {
var data = t.row($('tr[data-date="' + cell.data('date') + '"]')).data();
t.row($('tr[data-date="' + cell.data('date') + '"]')).remove().draw();
//t.row(cell.css('background-color', backgroundColour)).remove().draw();
return
}
else {
return
}
}
else {
rowNode = t.row.add([
null,
date.format('dddd,MMMM DD,YYYY'),
cell.text()
])
.draw()
.node();
$(rowNode).attr('data-date', cell.data('date'));
}
}
}
});
}
function LoadCalendar1() {
var t = $('#CalendarSelection').DataTable();
var date = new Date()
var d = date.getDate(),
m = date.getMonth(),
y = date.getFullYear()
var year = $("#CalenderYear").val();
if (year == "") {
year = y;
}
else {
year = year;
}
var startdate = year + '-01-01';
var startdate1 = new Date(startdate);
var enddate = year + '-12-31';
var enddate1 = new Date(enddate);
// I skip some conditions whether to check the selected day either sunday or other days ..
if (rr1 == 'Off Day') {
$('.fc-day.fc-Sun').css('backgroundColor', '#1BBF2A').text(rr1);
}
var arr = [];
for (i = startdate1; i < enddate1; i.setDate(i.getDate() + 1)) {
var New_SDate = i.getDay();
arr.push(([
null,
moment(i).format("dddd,MMMM DD,YYYY"),
rr2
]));
}
for (k = 0; k < arr.length; k++) {
t.row.add([
null,
arr[k][1],
arr[k][2]
]).draw();
}
}
</script>
由于我的代码太长，我编辑并给出了与问题相关的选定代码，所以如果打开右括号/括号丢失仅意味着拼写错误。我哪里做错了？请帮忙。