Question

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

我的目标是在点击的日期添加复选标记。有谁知道如何实现这一目标？

附件是我到目前为止的代码。非常感谢：D enter image description here

Answer 1

这是设置为使用unicode复选标记，但如果你愿意，还包括更改使用font-awesome的注释

＆＃13;

$('#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'
  }, ]
});

＆＃13;

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

＆＃13;

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

＆＃13;

在日历天中检查标记

1 个答案: