FullCalendar日历插件的简单使用(版本4.2.0)

本文介绍了如何在项目中使用FullCalendar 4.2.0日历插件实现日程安排功能。首先从官网下载示例进行了解,接着介绍如何引入必要的JS和CSS文件,特别强调jQuery需要前置引入。然后展示创建基本页面的步骤,以及相关的JS方法。同时,文中还提及了日期格式化的具体格式:yyyy-MM-dd hh:mm:ss。
摘要由CSDN通过智能技术生成

最近开的一个项目,涉及到了日历日程安排的功能,所以选用了一个免费的日历插件:FullCalendar

1.首先去官网将官方的demo下载下来,通过官方的demo进行一个初步的了解,下面正式开始

PS:中文文档的可能不太全,不清楚的可以去官网看看

2.建议先试试官方的示例:

  document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');

    var calendar = new FullCalendar.Calendar(calendarEl, {
      plugins: [ 'interaction', 'dayGrid', 'timeGrid', 'list', 'rrule' ],
      header: {
        left: 'prev,next today',
        center: 'title',
        right: 'dayGridMonth,timeGridWeek,timeGridDay,listMonth'
      },
      defaultDate: '2019-06-12',
      editable: true,
      events: [
        {
          title: 'rrule event',
          rrule: {
            dtstart: '2019-06-09T13:00:00',
            // until: '2019-06-01',
            freq: 'weekly'
          },
          duration: '02:00'
        }
      ],
      eventClick: function(arg) {
        if (confirm('delete event?')) {
          arg.event.remove()
        }
      }
    });

    calendar.render();
  });

</script>
<style>

  body {
    margin: 40px 10px;
    padding: 0;
    font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
    font-size: 14px;
  }

  #calendar {
    max-width
  • 0
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 6
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值