fullcalendar创建
一、下载相关文件
fullcalendar官方网站：https://fullcalendar.io/
普通版本可以免费下载，一些定制的东西需要付费。
点击GET STARTED,进入使用介绍页面
点击Initialize with Script Tags(直接点这个也可以跳转）
在这里就可以下载了。
我使用的是5.6版本的，现在已经出到5.7了。
另外我使用的bootstrap是4.6版本（bootstrap4首页）
js是3.6.0版本 （jQuery首页）
二、创建calendar
第一步：显示日历
如下代码就可以直接显示一个简单的日历了。
<div id="calendar"></div>
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',//左侧按钮
center: 'title',//中间按钮
right: 'dayGridMonth,timeGridWeek,timeGridDay'//右侧按钮
},
});
calendar.render();
});
</script>
这里是把js放在addEventListener()方法里，此 方法用于向指定元素添加事件句柄。
第二步：添加相关参数
initialView:'dayGridMonth',//初始视图，
initialDate: new Date(),//初始日期
timeZone: 'locale', //设置时区，默认是locale，
locale: 'zh-cn', //加载locales-all.js后，选择语言。只一种语言就加载文件夹中对应的就行，中文就是zh-cn.js。下面涉及到修改里面的数据，尽量加载zh-cn.js。
navLinks: true, // 可以单击每天/每周名字导航视图
editable: false, //是否可以拖动
dayMaxEvents: true, //当太多的事件允许“更多”链接
businessHours: true,//强调日历中的某些时间段，
weekNumbers: true, //是否在日历中显示第几周，
weekNumbersWithinDays:true, //在月/基本视图中显示周数的样式
showNonCurrentDates: true,//在月视图中，是否显示上个月和下个月的日期，默认true。
selectable: true, //是否可以选择
selectMirror: true,//点击空白月表新建事件，日表可以括时间段
根据自己的要求可以自己手动选择添加，有些默认的不需要添加也可以的。
第三步：添加数据
events: [
{
title: 'Business Lunch',
start: '2020-09-03T13:00:00',
constraint: 'businessHours'
},
{
title: 'Meeting',
start: '2020-09-13T11:00:00',
constraint: 'availableForMeeting', // defined below
color: '#257e4a'
},
]
也可以导入数据
asp.net：
events: {
url: '/ashx/calendar/calendar.ashx',
failure: function () {
document.getElementById('script-warning').style.display = 'block'
}
},
json：切换日程的时候出问题了，只显示当月的，其他月份不显示，不知道什么原因。
events: {
url: '/static/calendar/events.json',
failure: function () {
document.getElementById('script-warning').style.display = 'block'
}
},
flask：
events: {
url: '/calendar/event',
failure: function () {
document.getElementById('script-warning').style.display = 'block'
}
},
修改url地址就直接读取数据了，其他的不需要改动。
第四步：设置点击事件
点击日期空白位置触发
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()//删除事件
}
},
以上就是一个calendar的基本设置了。
整体代码如下
<div id="calendar"></div>
<!--修改今天的显示颜色-->
<style>
.fc .fc-daygrid-day.fc-day-today {
background-color: rgba(255, 0, 0, 0.15);
background-color: var(--fc-today-bg-color, rgba(255, 0, 0, 0.15));
}
</style>
<!--利用js显示日历-->
<script>
document.addEventListener('DOMContentLoaded', function () {
var calendarEl = document.getElementById('calendar');
var calendar = new FullCalendar.Calendar(calendarEl, {
headerToolbar: {
left: 'prevYear,prev,next,nextYear today',//左侧按钮
center: 'title',//中间按钮
right: 'dayGridMonth,timeGridWeek,timeGridDay'//右侧按钮
},
initialView:'dayGridMonth',//初始视图，
initialDate: new Date(),//初始日期
timeZone: 'locale', //设置时区，默认是locale，
locale: 'zh-cn', //加载locales-all.js后，选择语言。
navLinks: true, // 可以单击每天/每周名字导航视图
editable: false, //是否可以拖动
dayMaxEvents: true, //当太多的事件允许“更多”链接
businessHours: true,//强调日历中的某些时间段，
weekNumbers: true, //是否在日历中显示第几周，
weekNumbersWithinDays:true, //在月/基本视图中显示周数的样式
showNonCurrentDates: true,//在月视图中，是否显示上个月和下个月的日期，默认true。
selectable: true, //是否可以选择
selectMirror: true,//点击空白月表新建事件，日表可以括时间段
events: {
url: '/ashx/calendar/calendar.ashx',
failure: function () {
document.getElementById('script-warning').style.display = 'block'
}
},
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()//删除事件
}
},
});
calendar.render();
});
</script>
显示今天的颜色因为屏幕角度的问题，看的不是很明显，所以我把颜色给调了。
由于main.css文件里是0.15的透明度，所以要选个深色的。可以根据自己喜好调整颜色和透明度。
<style>
.fc .fc-daygrid-day.fc-day-today {
background-color: rgba(255, 0, 0, 0.15);
background-color: var(--fc-today-bg-color, rgba(255, 0, 0, 0.15));
}
</style>
右侧按钮可以显示月、周、日，还可以按年，按日程形式的。
dayGridMonth,timeGridWeek,timeGridDay,listYear,listMonth,listWeek,listDay,list
但是用zh-cn转换都显示日程两字。
修改main.js和zh-cn.js可以达到下面的效果。
首先修改zh-cn.js文件，18行的list:'日程’之后添加下面的几行代码。
buttonText: {
prev: '上月',
next: '下月',
today: '今天',
month: '月',
week: '周',
day: '日',
list: '日程',
listYear:'年',//这行开始是新加的。
listMonth:'月',
listWeek:'周',
listDay:'日',
},
然后修改main.js文件，需要修改2处地方。
第一处在4091行。在list: ‘list’,后面添加下面的几行代码。
buttonText: {
prev: 'prev',
next: 'next',
prevYear: 'prev year',
nextYear: 'next year',
year: 'year',
today: 'today',
month: 'month',
week: 'week',
day: 'day',
list: 'list',
listYear:'listYear',//这行开始是新加的。
listMonth:'listMonth',
listWeek:'listWeek',
listDay:'listDay',
},
第二处在13910开始，分别在listYear,listMonth,listWeek,listDay中添加buttonTextKey。
修改后如下
views: {
list: {
component: ListView,
buttonTextKey: 'list',
listDayFormat: { month: 'long', day: 'numeric', year: 'numeric' },
},
listDay: {
type: 'list',
buttonTextKey:'listDay',//这行是新加的
duration: { days: 1 },
listDayFormat: { weekday: 'long' },
},
listWeek: {
type: 'list',
buttonTextKey:'listWeek',//这行是新加的
duration: { weeks: 1 },
listDayFormat: { weekday: 'long' },
listDaySideFormat: { month: 'long', day: 'numeric', year: 'numeric' },
},
listMonth: {
type: 'list',
buttonTextKey:'listMonth',//这行是新加的
duration: { month: 1 },
listDaySideFormat: { weekday: 'long' },
},
listYear: {
type:'list',
buttonTextKey: 'listYear',//这行是新加的
duration: { year: 1 },
listDaySideFormat: { weekday: 'long' },
},
},
listDay和list用一个就可以了，都是一样的，唯一区别就是listDay显示的是星期，list显示的日期，个人觉得listDay比较好。
list显示如下：
listDay显示如下：
calendar.ashx 如下
<%@ WebHandler Language="C#" Class="calendar" %>
using System;
using System.Web;
using System.Collections.Generic;
using System.Data;
using System.Data.OleDb;
using Newtonsoft.Json;
public class calendar : IHttpHandler {
public void ProcessRequest (HttpContext context) {
context.Response.ContentType = "text/plain";
OleDbConnection conn = new OleDbConnection("Provider=Microsoft.ace.OLEDB.12.0;User Id=Admin;Data Source=|DataDirectory|data.accdb"); //创建连接对象
conn.Open();
string cal_str = "select * from calendar ";
OleDbCommand cal_Com = new OleDbCommand(cal_str, conn);
OleDbDataAdapter cal_myda = new OleDbDataAdapter();
DataSet caltb = new DataSet();
cal_myda.SelectCommand = cal_Com;
DataTable cal_dt = new DataTable();
cal_myda.Fill(caltb);
cal_dt = caltb.Tables[0];
conn.Close();
string json = JsonConvert.SerializeObject(cal_dt);
context.Response.Write(json);
}
public bool IsReusable {
get {
return false;
}
}
}
data.accdb内容如下：
可以根据不同的日程类型设置不同的显示颜色如下：
下一篇文章：
fullcalendar应用（二）
版权声明：本文为weixin_41053472原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。