如何通过单击按钮更改单元格背景颜色并在完整日历单元格中添加文本（来自选定按钮）？

Question

我不熟悉 java 脚本概念的完整日历。

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

问题 2：另外，我需要将那些选定的日期添加到我的数据中table..这也有效，但是如何将文本从按钮传递到 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>

这使我的日历看起来正常并且数据也添加到数据 table。

但是对于我的按钮，我现在只尝试了 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 按钮后，日期单元格必须更改为蓝绿色，文本必须添加到该单元格作为工作日。我的脚本不工作。有没有什么办法解决这一问题。敬请 help.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>

如您所见，它现在允许您将 select 的日期添加到工作日或休息日标签内的数据表中，并根据按钮（工作日 - 休息日） select 它为日期着色 selected 并设置标签。

希望对您有所帮助，如果您对此感到满意，请采纳这个答案。

如何通过单击按钮更改单元格背景颜色并在完整日历单元格中添加文本（来自选定按钮）？

How to change cell background color and add text(from selected button) in full calendar Cell by Clicking Button?

html

javascript

datatable

jquery

fullcalendar