勾选“日历日”中的标记

Question

我目前正在制作完整的日历，我想知道是否有人可以帮助我。到目前为止，我有一个允许用户选择日期的日历。一旦点击，特定的日子就会改变颜色。

我的目标是在已点击的日期上添加复选标记。有人知道这是如何实现的吗?

附件是我到目前为止的代码。D选项正确此处输入图像描述

Answer 1

设置为使用unicode复选标记，但也包括注释，如果您喜欢，可以使用font-awesome

$('#calendar').fullCalendar({
  /* Add i tag to all day cells as placeholder for checkmark */
  dayRender: function(date, cell) {
    var check = document.createElement('i');
    check.classList.add('checkbox');
    cell.append(check);
  },
  dayClick: function(date, jsEvent, view) {
    var check = $(this).find('i.checkbox'); /* find the i.checkbox */
    /* Simpler than the below but if you need to do other things, if/else better approach */
    check.toggleClass('marked');
    /* if (check.hasClass('marked')) { // font-awesome: fa-check
      check.removeClass("marked"); // font-awesome: fa fa-check
    } else {
      check.addClass("marked"); // font-awesome: fa fa-check
    } */
  },
  events: [{
    start: moment().format('YYYY-MM-DD'),
    end: moment().add(1, 'day').format('YYYY-MM-DD'),
    title: 'Event 1'
  }, {
    start: moment().add(1, 'day').format('YYYY-MM-DD'),
    end: moment().add(3, 'day').format('YYYY-MM-DD'),
    title: 'Event 2'
  }, ]
});

i.checkbox.marked::before {
  content: '2713';
  /* unicode check mark */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.14.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/fullcalendar.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/2.9.0/fullcalendar.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<div id='calendar'>
</div>