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

Question

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

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

问题2:另外，我需要将这些选定的日期添加到我的数据表中..这也有效，但是如何将文本从按钮传递到td？

代码:完整的日历设计:

<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>

正如您所看到的，它现在允许您将选择的日期添加到工作日或休息日标签内的数据表中，并根据您选择的按钮(工作日 - 休息日)，它为所选日期着色并设置标签。

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