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>
</script>
浙公网安备 33010602011771号