如何通过单击按钮在完整日历单元格中更改单元格背景颜色并添加文本(从选定按钮)

Question

我是Java脚本概念的完整日历的新手。

我有一个完整的日历。我有两个按钮工作日和一天。我需要的是，只有在我选择这两个按钮中的任何一个后，才能选择日历中的日期单元格。可以说，如果我选择工作日按钮，那么我选择的单元格必须更改其背景颜色，并且必须将文本工作日添加到那些选定的单元格中。

Question2：另外，我需要将选定的日期添加到我的数据表中。

代码：完整日历设计：

<div class="box box-primary">
<div class="box-body no-padding">
<!-- THE CALENDAR -->
<div id="calendar_full"></div>
</div>
<!-- /.box-body -->
</div>

单独加载日历的脚本：

 <script>
    $(function () {
   var t = $('#Selection').DataTable();
        var counter = 1;
        var date = new Date()
        var d = date.getDate(),
            m = date.getMonth(),
            y = date.getFullYear()
        $('#calendar_full').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title'
                //right: 'month' //agendaWeek,agendaDay'
            },
            selectable: true,
                selectHelper: true,
                dayClick: function (date, jsEvent, view) {
                    //var D = moment(date);
                    t.row.add([
                        counter,
                        date.format('dddd,MMMM DD,YYYY'),
                        'testing'
                    ]).draw(false);
                    counter++;
                    cell.css("background-color", "teal");
                }
        })
    })
    </script>

这使我的日历看起来正确，并且数据还添加到数据表中。

但是对于我的按钮，我到目前为止仅尝试了1个按钮：脚本如下：

 <script>
  $(function () {
  var t = $('#CalendarSelection').DataTable();
        var counter = 1;
        var date = new Date()
        var d = date.getDate(),
            m = date.getMonth(),
            y = date.getFullYear()
        $('#calendar_full').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title'
                //right: 'month' //agendaWeek,agendaDay'
            },
        })
        $("#btnWorkingDay").select(function () {
            $('#calendar_full').fullCalendar({
                header: {
                    left: 'prev,next today',
                    center: 'title'
                    //right: 'month' //agendaWeek,agendaDay'
                },
                selectable: true,
                selectHelper: true,
                dayClick: function (date, jsEvent, view) {
                    t.row.add([
                        counter,
                        date.format('dddd,MMMM DD,YYYY'),
                        'testing'
                    ]).draw(false);
                    counter++;
                    cell.css("background-color", "teal");
                },
            })
        });
    })
    </script>

btnworkingday是我的按钮名称。仅在我单击我的btnworkingday按钮之后，日期单元必须更改为蓝绿色的颜色，并且必须将文本添加到该单元格中。我的脚本不起作用。有没有什么办法解决这一问题。请帮助。tia。

Answer 1

您需要将其设置为如下：

$(function(){
  var t = $('#CalendarSelection').DataTable();
  var counter = 1;
  var date = new Date()
  var d = date.getDate(),
      m = date.getMonth(),
      y = date.getFullYear()
  $("#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: {
      left: 'prev,next today',
      center: 'title'
      //right: 'month' //agendaWeek,agendaDay'
    },
    selectable: true,
    selectHelper: true,
    dayClick: function (date, jsEvent, view) {
      if(!$("#btnWorkingDay").hasClass("selected") && !$("#btnOffDay").hasClass("selected"))
        return;
      var cell = $(this);
      
      if($("#btnWorkingDay").hasClass("selected")){
        var backgroundColour = 'blue';
        var description = 'Working Day';
      }else if($("#btnOffDay").hasClass("selected")){
        var backgroundColour = 'red';
        var description = 'Off 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();
        
        t
          .row($('tr[data-date="'+cell.data('date')+'"]'))
          .data([
            data[0],
            data[1],
            cell.text()
          ]);
          
          return;
      }
      
      rowNode = t.row.add([
          counter,
          date.format('dddd,MMMM DD,YYYY'),
          cell.text()
      ])
        .draw()
        .node();
      
      $(rowNode).attr('data-date', cell.data('date'));   
      counter++;       
    }
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.9.0/moment.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.js"></script>
<link href="https://fullcalendar.io/js/fullcalendar-3.1.0/fullcalendar.css" rel="stylesheet"/>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<div class="box box-primary">
<div class="box-body no-padding">
<!-- THE CALENDAR -->
<div id="calendar_full"></div>
</div>
<!-- /.box-body -->
</div>
<button type="button" id="btnWorkingDay">
Working Day
</button>
<button type="button" id="btnOffDay">
Off Day
</button>
<div>
  <table id="CalendarSelection">
    <thead>
      <tr>
        <th>id</th>
        <th>date</th>
        <th>description</th>
      </tr>
    </thead>
  </table>
</div>

您现在可以看到它，允许您添加您选择的日期，以便在工作日期或下一天的标签中，并基于按钮(工作日 - 休息日(，您选择它为选择的日期颜色并设置为标签。

我希望这会有所帮助，如果您对此感到满意，请接受它作为答案。