基本用法

    xiaoxiao2021-03-25  191

    在网页上嵌入日历的第一步是拥有正确的JavaScript和CSS文件。请确保您在网页的中包含了FullCalendar样式表,以及FullCalendar,jQuery和Moment JavaScript文件:

    <link rel='stylesheet' href='fullcalendar/fullcalendar.css' /> <script src='lib/jquery.min.js'></script> <script src='lib/moment.min.js'></script> <script src='fullcalendar/fullcalendar.js'></script>

    jQuery和Moment必须在FullCalendar的JavaScript之前加载。

    如果计划进行拖动或调整大小,您可能需要一些额外的依赖项。更多信息。

    一旦你有依赖关系,你需要编写初始化日历的JavaScript代码。此代码必须在页面初始化后执行。最好的方法是使用jQuery的$(document).ready,如下所示:

    $(document).ready(function() { // page is now ready, initialize the calendar... $('#calendar').fullCalendar({ // put your options and callbacks here }) });

    上面的代码应该放在页面头部的

    <div id='calendar'></div>

    就是这样,你应该看到一个基于月份的日历,没有任何事件。如果您想了解如何显示活动,请访问Google日历或活动数据部分。


    选项

    FullCalendar的大多数文档描述了影响日历外观或行为的选项。选项通常在日历初始化时设置,如下所示:

    $('#calendar').fullCalendar({ weekends: false // will hide Saturdays and Sundays });

    回调

    回调类似于选项,但是它们是在特殊情况发生时调用的函数。在以下示例中,每当用户点击某一天时,系统就会显示一个警告框:

    $('#calendar').fullCalendar({ dayClick: function() { alert('a day has been clicked!'); } })

    方法

    方法提供了从JavaScript代码处理日历的方法。一个方法使用熟悉的fullCalendar命令对已经初始化的日历的jQuery对象进行操作,但是采用完全不同的方式:

    $('#calendar').fullCalendar('next');

    这将调用下一个方法,并将强制日历移动到下一个月/周/天。

    转载请注明原文地址: https://ju.6miu.com/read-2672.html

    最新回复(0)