js插件fullcalendar配置项及样例
部分配置项
<link href="./plugins/fullcalendar-5.11.2/lib/main.css" rel="stylesheet" /> <script type="text/javascript" language="javascript" src="./plugins/jquery/jquery-1.9.1.min.js"></script> <script type="text/javascript" language="javascript" src="./plugins/fullcalendar-5.11.2/lib/main.min.js"></script> <script type="text/javascript" language="javascript" src="./plugins/fullcalendar-5.11.2/lib/locales-all.min.js"></script> <div class="calendar" id="calendar"></div> <script> document.addEventListener("DOMContentLoaded", function () { var calendarEl = document.getElementById("calendar"); var calendar = new FullCalendar.Calendar(calendarEl, { locale: "zh-cn", themeSystem: "standard", //样式主题 height: "auto", //高度自动 aspectRatio: 1.35, //宽高比 initialView: "dayGridMonth", //自定义按钮 customButtons: { myCustomButton: { text: "custom!", click: function () { alert("clicked the custom button!"); }, }, }, headerToolbar: { left: "prevYear,prev,next,nextYear today myCustomButton", center: "title", right: "dayGridMonth,timeGridWeek,timeGridDay,listMonth", }, //自定义按钮文本内容 views: { listMonth: { buttonText: "list month" }, }, footerToolbar: false, dayHeaders: true, //是否显示日历中首行的周一至周日行 buttonIcons: false, //按钮图标用文本替代 weekends: true, //是否显示周六日 hiddenDays: [], //排除掉一周中的第几天，Sunday=0 weekNumbers: true, //是否显示当前是第几周 editable: true, //是否日历上的事件可以被修改 selectable: true, //是否允许用户选择连续的多日 select: function (arg) { var title = prompt("Event Title:"); if (title) { calendar.addEvent({ title: title, start: arg.start, end: arg.end, allDay: arg.allDay, }); } calendar.unselect(); }, eventClick: function (arg) { if (confirm("Are you sure you want to delete this event?")) { arg.event.remove(); } }, droppable: true, //是否允许接收外部事件 unselectAuto: true, //用户点击其它区域时，目前选择区域是否清空，selectable=true时生效 navLinks: true, //定义单元格是否可点击 slotMinTime: "08:00", //定义每天的时间范围 slotMaxTime: "20:00", dayMaxEvents: true, // 事件太多时添加more按钮 businessHours: [ { daysOfWeek: [1, 2, 3], // Monday, Tuesday, Wednesday startTime: "08:00", // 8am endTime: "18:00", // 6pm }, { daysOfWeek: [4, 5], // Thursday, Friday startTime: "10:00", // 10am endTime: "16:00", // 4pm }, ], navLinkDayClick: function (date, jsEvent) { console.log("day", date.toISOString()); console.log("coords", jsEvent.pageX, jsEvent.pageY); }, dateClick: function (info) { alert(info.dateStr + " has been clicked!"); }, events: [ { title: "Business Lunch", start: "2022-12-01T13:00:00", constraint: "businessHours", }, { title: "Meeting", start: "2022-12-01T11:00:00", constraint: "availableForMeeting", // defined below color: "#257e4a", }, { groupId: 999, title: "Group Event", start: "2022-12-06T16:00:00", }, { groupId: 999, title: "Group Event", start: "2022-12-07T16:00:00", }, { title: "Click for baidu", url: "https://www.baidu.com/", start: "2022-12-05T16:00:00", }, // areas where "Meeting" must be dropped { groupId: "availableForMeeting", start: "2022-12-07T10:00:00", end: "2022-12-07T12:00:00", display: "background", }, // red areas where no events can be dropped { start: "2022-12-02", end: "2022-12-03", overlap: false, display: "background", color: "#ff9f89", }, ], }); calendar.render(); calendar.on("dateClick", function (info) { console.log("clicked on " + info.dateStr); }); }); </script>
页面如下：
Premium 部分样例
<link href="./plugins/fullcalendar-5.11.2/fullcalendar-scheduler/main.min.css" rel="stylesheet" /> <script type="text/javascript" language="javascript" src="./plugins/fullcalendar-5.11.2/fullcalendar-scheduler/main.min.js"></script> <script type="text/javascript" language="javascript" src="./plugins/fullcalendar-5.11.2/lib/locales-all.min.js"></script> <div class="calendar" id="calendar" style="margin: 2rem auto"></div> <div class="calendar" id="calendar1" style="margin: 2rem auto"></div> <div class="calendar" id="calendar2" style="margin: 2rem auto"></div> <div class="calendar" id="calendar3" style="margin: 2rem auto"></div> <div class="calendar" id="calendar4" style="margin: 2rem auto"></div> <script> document.addEventListener("DOMContentLoaded", function () { var calendarEl = document.getElementById("calendar"); var calendar = new FullCalendar.Calendar(calendarEl, { schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives", timeZone: "Asia/Shanghai", headerToolbar: { left: "today prev,next", center: "title", right: "resourceTimelineDay,resourceTimelineTenDay,resourceTimelineMonth,resourceTimelineYear", }, initialView: "resourceTimelineDay", scrollTime: "08:00", aspectRatio: 1.5, views: { resourceTimelineDay: { buttonText: ":15 slots", slotDuration: "00:15", }, resourceTimelineTenDay: { type: "resourceTimeline", duration: { days: 10 }, buttonText: "10 days", }, }, editable: true, resourceAreaHeaderContent: "Rooms", resources: "http://localhost:3000/html-demos/files/resources.json?with-nesting&with-colors", // events: "http://localhost:3000/html-demos/files/events-for-resources.json?single-day&for-resource-timeline", events: { url: "../test.php", method: "POST", extraParams: { custom_param1: "something", custom_param2: "somethingelse", }, failure: function () { alert("there was an error while fetching events!"); }, }, eventSources: [ { url: "../test1.php", method: "POST", extraParams: { custom_param1: "something", custom_param2: "somethingelse", }, failure: function () { alert("there was an error while fetching events!"); }, color: "yellow", textColor: "black", }, ], }); calendar.render(); }); </script>
<script> document.addEventListener("DOMContentLoaded", function () { var calendarEl = document.getElementById("calendar1"); var calendar = new FullCalendar.Calendar(calendarEl, { schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives", headerToolbar: { left: "today prev,next", center: "title", right: "resourceTimelineDay,resourceTimelineWeek", }, aspectRatio: 1.5, initialView: "resourceTimelineDay", resourceAreaWidth: "40%", resourceAreaColumns: [ { group: true, field: "building", headerContent: "Building", }, { field: "title", headerContent: "Room", }, { field: "occupancy", headerContent: "Occupancy", }, ], resources: [ { id: "a", building: "460 Bryant", title: "Auditorium A", occupancy: 40 }, { id: "b", building: "460 Bryant", title: "Auditorium B", occupancy: 40 }, { id: "c", building: "460 Bryant", title: "Auditorium C", occupancy: 40 }, { id: "d", building: "460 Bryant", title: "Auditorium D", occupancy: 40 }, { id: "e", building: "460 Bryant", title: "Auditorium E", occupancy: 40 }, { id: "f", building: "460 Bryant", title: "Auditorium F", occupancy: 40 }, { id: "g", building: "564 Pacific", title: "Auditorium G", occupancy: 40 }, { id: "h", building: "564 Pacific", title: "Auditorium H", occupancy: 40 }, { id: "i", building: "564 Pacific", title: "Auditorium I", occupancy: 40 }, { id: "j", building: "564 Pacific", title: "Auditorium J", occupancy: 40 }, { id: "k", building: "564 Pacific", title: "Auditorium K", occupancy: 40 }, { id: "l", building: "564 Pacific", title: "Auditorium L", occupancy: 40 }, { id: "m", building: "564 Pacific", title: "Auditorium M", occupancy: 40 }, { id: "n", building: "564 Pacific", title: "Auditorium N", occupancy: 40 }, { id: "o", building: "564 Pacific", title: "Auditorium O", occupancy: 40 }, { id: "p", building: "564 Pacific", title: "Auditorium P", occupancy: 40 }, { id: "q", building: "564 Pacific", title: "Auditorium Q", occupancy: 40 }, { id: "r", building: "564 Pacific", title: "Auditorium R", occupancy: 40 }, { id: "s", building: "564 Pacific", title: "Auditorium S", occupancy: 40 }, { id: "t", building: "564 Pacific", title: "Auditorium T", occupancy: 40 }, { id: "u", building: "564 Pacific", title: "Auditorium U", occupancy: 40 }, { id: "v", building: "564 Pacific", title: "Auditorium V", occupancy: 40 }, { id: "w", building: "564 Pacific", title: "Auditorium W", occupancy: 40 }, { id: "x", building: "564 Pacific", title: "Auditorium X", occupancy: 40 }, { id: "y", building: "564 Pacific", title: "Auditorium Y", occupancy: 40 }, { id: "z", building: "564 Pacific", title: "Auditorium Z", occupancy: 40 }, ], }); calendar.render(); }); </script>
<script> document.addEventListener("DOMContentLoaded", function () { var calendarEl = document.getElementById("calendar2"); var calendar = new FullCalendar.Calendar(calendarEl, { schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives", headerToolbar: { left: "today prev,next", center: "title", right: "resourceTimelineDay,resourceTimelineWeek", }, aspectRatio: 1.6, initialView: "resourceTimelineDay", resourceGroupField: "building", resources: [ { id: "a", building: "460 Bryant", title: "Auditorium A" }, { id: "b", building: "460 Bryant", title: "Auditorium B" }, { id: "c", building: "460 Bryant", title: "Auditorium C" }, { id: "d", building: "460 Bryant", title: "Auditorium D" }, { id: "e", building: "460 Bryant", title: "Auditorium E" }, { id: "f", building: "460 Bryant", title: "Auditorium F" }, { id: "g", building: "564 Pacific", title: "Auditorium G" }, { id: "h", building: "564 Pacific", title: "Auditorium H" }, { id: "i", building: "564 Pacific", title: "Auditorium I" }, { id: "j", building: "564 Pacific", title: "Auditorium J" }, { id: "k", building: "564 Pacific", title: "Auditorium K" }, { id: "l", building: "564 Pacific", title: "Auditorium L" }, { id: "m", building: "564 Pacific", title: "Auditorium M" }, { id: "n", building: "564 Pacific", title: "Auditorium N" }, { id: "o", building: "101 Main St", title: "Auditorium O" }, { id: "p", building: "101 Main St", title: "Auditorium P" }, { id: "q", building: "101 Main St", title: "Auditorium Q" }, { id: "r", building: "101 Main St", title: "Auditorium R" }, { id: "s", building: "101 Main St", title: "Auditorium S" }, { id: "t", building: "101 Main St", title: "Auditorium T" }, { id: "u", building: "101 Main St", title: "Auditorium U" }, { id: "v", building: "101 Main St", title: "Auditorium V" }, { id: "w", building: "101 Main St", title: "Auditorium W" }, { id: "x", building: "101 Main St", title: "Auditorium X" }, { id: "y", building: "101 Main St", title: "Auditorium Y" }, { id: "z", building: "101 Main St", title: "Auditorium Z" }, ], }); calendar.render(); }); </script>
<script> document.addEventListener("DOMContentLoaded", function () { var calendarEl = document.getElementById("calendar3"); var calendar = new FullCalendar.Calendar(calendarEl, { schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives", timeZone: "UTC", initialView: "resourceTimeGridFourDay", datesAboveResources: true, headerToolbar: { left: "prev,next", center: "title", right: "resourceTimeGridDay,resourceTimeGridFourDay", }, views: { resourceTimeGridFourDay: { type: "resourceTimeGrid", duration: { days: 4 }, buttonText: "4 days", }, }, resources: [ { id: "a", title: "Room A" }, { id: "b", title: "Room B" }, ], }); calendar.render(); }); </script>
<script> document.addEventListener("DOMContentLoaded", function () { var calendarEl = document.getElementById("calendar4"); var calendar = new FullCalendar.Calendar(calendarEl, { schedulerLicenseKey: "CC-Attribution-NonCommercial-NoDerivatives", timeZone: "UTC", initialView: "resourceTimeGridFourDay", headerToolbar: { left: "prev,next", center: "title", right: "resourceTimeGridDay,resourceTimeGridFourDay", }, views: { resourceTimeGridFourDay: { type: "resourceTimeGrid", duration: { days: 4 }, buttonText: "4 days", }, }, resources: [ { id: "a", title: "Room A" }, { id: "b", title: "Room B" }, ], }); calendar.render(); }); </script>
