当前位置:主页 > JavsScript库 > 日期 / 时间 >

功能丰富的事件日历 - Calendar.js
栏目分类:日期 / 时间   发布日期:2021-08-21   浏览次数:

一个功能齐全的事件日历 JavaScript 库,允许您在响应式日历界面中查看和管理事件(如计划任务、约会)。

特点:

  • 添加/删除事件。

  • 在弹出窗口中编辑事件。

  • 可拖动事件。

  • 将事件导出到 JSON/TXT/XML/CSV/iCal/Markdown/HTML 文件。

  • 键盘可访问性。

如何使用它:

1. 在页面中添加样式表 calendarjs.css 和 JavaScript calendarjs.js。

<link rel="stylesheet" href="src/calendarjs.css" />
<script src="src/calendarjs.js"></script>

2. 创建一个容器来保存事件日历。

<div id="myCalendar">
</div>

3. 创建事件日历的新实例。

// calendarJs(id, options, startDateTime)
var calendarInstance = new calendarJs( "myCalendar", { 
    // options here
}),

4. 将您自己的事件添加到日历中。

  • id:事件的ID。

  • title:事件的标题。

  • from:事件发生的日期。

  • to:事件运行到的日期。

  • description:事件的描述。

  • location:事件的位置。

  • color:应用于事件的颜色(覆盖所有其他颜色)。

  • colorText:应用于事件文本的颜色(覆盖所有其他颜色)。

  • colorBorder:应该用于事件边框的颜色(覆盖所有其他颜色)。

  • isAllDay:如果这是一个全天事件。

  • repeatEver:事件应该多久重复一次(0 = 从不,1 = 每天,2 = 每周,3 = 每月,4 = 每年)。

  • repeatEveryExcludeDays:重复事件时应排除的天数。

  • seriesIgnoreDates:重复事件时应忽略的日期(字符串格式)。

  • created:创建事件的日期。

  • organizerName:组织者的名称。

  • organizerEmailAddress:组织者的电子邮件地址。

  • repeatEnds:重复系列应该结束的日期。

  • group:事件所属的组的名称。

var events = [
    {
      from: previousDay,
      to: previousDay,
      title: "前一天",
      description: "这是对已添加事件的另一个描述,因此可以在弹出对话框中显示。",
      location: "团队会议",
      isAllDayEvent: true,
      color: "#FF0000",
      colorText: "#FFFF00",
      colorBorder: "#00FF00"
    },
    // 这里有更多事件
];
calendarInstance.addEvents(events);

5. 需要时导出事件。

<button onclick="calendarInstance.exportAllEvents( 'csv' );">导出所有事件 (csv)</button>
<button onclick="calendarInstance.exportAllEvents( 'xml' );">导出所有事件 (xml)</button>
<button onclick="calendarInstance.exportAllEvents( 'json' );">导出所有事件 (json)</button>
<button onclick="calendarInstance.exportAllEvents( 'text' );">导出所有事件 (text)</button>

6. 自定义选项的所有可用选项。

  • previousMonthTooltipText:应该用于“上个月”按钮的工具提示文本。

  • nextMonthTooltipText:应该用于“下个月”按钮的工具提示文本。

  • previousDayTooltipText:应该用于“前一天”按钮的工具提示文本。

  • nextDayTooltipText:应该用于“下一天”按钮的工具提示文本。

  • previousWeekTooltipText:应该用于“上周”按钮的工具提示文本。

  • nextWeekTooltipText:应该用于“下周”按钮的工具提示文本。

  • addEventTooltipText:应该用于“添加事件”按钮的工具提示文本。

  • closeTooltipText:应该用于“关闭”按钮的工具提示文本。

  • exportEventsTooltipText:应该用于“导出事件”按钮的工具提示文本。

  • listAllEventsTooltipText:应该用于“查看所有事件”按钮的工具提示文本。

  • listWeekEventsTooltipText:应该用于“查看当前周事件”按钮的工具提示文本。

  • todayTooltipText:应该用于“今天”按钮的工具提示文本。

  • refreshTooltipText:应用于“刷新”按钮的工具提示文本。

  • searchTooltipText:应该用于“搜索”按钮的工具提示文本。

  • expandDayTooltipText:应该用于“Expand Day”按钮的工具提示文本。

  • dayHeaderNames:用于日标题的名称(默认为“[“Mo”、“Tu”、“We”、“Th”、“Fr”、“Sa”、“Su”]')。

  • dayNames:全名(默认为 '[ “Monday”, “Tuesday”, “Wednesday”, “Thursday”, “Friday”, “Saturday”, “Sunday” ]')。

  • fromText:应该为“From:”标签显示的文本。

  • toText:::应为“To:”标签显示的文本。

  • isAllDayEventText:应该为“是全天事件”标签显示的文本。

  • titleText:应为“标题:”标签显示的文本。

  • descriptionText:应该为“Description:”标签显示的文本。

  • locationText:应该为“Location:”标签显示的文本。

  • addText:应该为“添加”按钮显示的文本。

  • updatedText:应为“更新”按钮显示的文本。

  • cancelText:应为“取消”按钮显示的文本。

  • removeEventText:应该为“删除事件”按钮显示的文本。

  • addEventTitle:为“添加事件”标签显示的标题栏文本。

  • editEventTitle:为“编辑事件”标签显示的标题栏文本。

  • monthNames:月份的名称(默认为 '[ “January”、“February”、“March”、“April”、“May”、“June”、“July”、“August”、“September”、“十月”、“十一月”、“十二月”]')。

  • showDayNumberOrdinals:指示是否应显示日期序号值(默认为 true)。

  • dragAndDropForEventsEnabled 指示是否启用了在一个月中的几天左右的拖放事件(默认为 true)。

  • exportStartFilename:导出所有日历事件时应使用的起始文件名(默认为“exported_events_”)。

  • fromTimeErrorMessage:为“请选择一个有效的‘从’时间”显示的错误消息。标签。

  • toTimeErrorMessage:为“请选择一个有效的‘到’时间”显示的错误消息。标签。

  • toSmallerThanFromErrorMessage:为“请选择一个大于“起始”日期的“截止”日期显示的错误消息。标签。

  • titleErrorMessage:为“请在‘标题’字段中输入一个值(无空格)”显示的错误消息。标签。

  • stText: : “st”的日期序数文本。

  • ndText: : “nd”的日期序数文本。

  • rdText: : “rd”的日期序数文本。

  • thText: : “th”的日期序数文本。

  • fullDayViewEnabled:指示是否启用查看全天的所有事件(默认为 true)。

  • maximumEventsPerDayDisplay:每天应在主日历显示中显示的最大事件数(默认为 3)。

  • yesText:应为“是”标签显示的文本。

  • noText:应为“否”标签显示的文本。

  • extraSelectableYearsAhead:可在下拉列表中选择的额外年份数(默认为 51)。

  • allDayEventText:应为“全天事件”标签显示的文本。

  • allEventsText:应为“所有事件”标签显示的文本。

  • exportEventsEnabled:指示是否启用导出事件(默认为 true)。

  • manualEditingEnabled:指示是否启用添加、编辑、拖动和删除事件(默认为 true)。

  • showTimesInMainCalendarEvents:指示是否应在主日历视图事件上显示时间(默认为 false)。

  • startsOnText:应为“Starts on”标签显示的文本。

  • andFinishesOnText:应为“并完成于”标签显示的文本。

  • toTimeText:应为“to”标签显示的文本。

  • autoRefreshTimerDelay:每次完全刷新前等待的时间(默认为 5000 毫秒,0 禁用它)。

  • ConfirmEventRemoveTitle:删除事件时显示的确认消息的标题(默认为“Confirm Event Removal”)。

  • ConfirmEventRemoveMessage:删除事件时显示的确认消息文本(默认为“删除此事件无法撤消。您要继续吗?”)。

  • okText:应该为“确定”按钮显示的文本。

  • selectExportTypeTitle:应为“选择导出类型”标签显示的文本。

  • fullScreenModeEnabled:指示双击主标题栏是否激活全屏模式(默认为 true)。

  • eventTooltipDelay:等待事件工具提示显示的时间(默认为 1000 毫秒)。

  • selectColorsText:应该为“选择颜色”标签显示的文本。

  • backgroundColorText:应该为“背景颜色:”标签显示的文本。

  • textColorText:应为“文本颜色:”标签显示的文本。

  • borderColorText:应该为“Border Color:”标签显示的文本。

  • searchEventsTitle:应为“搜索事件”标签显示的文本。

  • forText:应该为“For:”标签显示的文本。

  • previousText:应该为“Previous”按钮显示的文本。

  • nextText:应该为“下一步”按钮显示的文本。

  • matchCaseText:应为“Match Case”标签显示的文本。

  • minimumDayHeight:指示主要日历日应使用的高度(默认为 0 – 自动)。

  • repeatsText:应为“重复:”标签显示的文本。

  • repeatDaysToExcludeText:应为“重复排除天数:”标签显示的文本。

  • seriesIgnoreDatesText:应该为“系列忽略日期:”标签显示的文本。

  • repeatsNever:应该为“从不”标签显示的文本。

  • repeatsEveryDayText:应为“每天”标签显示的文本。

  • repeatsEveryWeekText:应为“每周”标签显示的文本。

  • repeatsEveryMonthText:应为“每月”标签显示的文本。

  • repeatsEveryYearText:应为“每年”标签显示的文本。

  • selectDaysToExcludeTitle:应为“选择要排除的天数”标签显示的文本。

  • moreText:应为“更多”标签显示的文本。

  • holidays:应为特定天/月显示的假期(请参阅属性的“假期”文档)。

  • includeText:应为“包含:”标签显示的文本。

  • minimizedTooltipText:应用于“最小化”按钮的工具提示文本。

  • restoreTooltipText:应该用于“恢复”按钮的工具提示文本。

  • removeAllEventsInSeriesText:应为“删除系列中的所有事件”标签显示的文本。

  • createdText:应该为“Created:”标签显示的文本。

  • organizerName:组织者的默认名称(默认为空字符串)。

  • organizerEmailAddress:组织者的默认电子邮件地址(默认为空字符串)。

  • organizerNameText:应为“组织者:”标签显示的文本。

  • organizerEmailAddressText:标签:应显示为“组织者通过电子邮件将”文本。

  • enableFullScreenTooltipText:启用“打开全屏模式”按钮的工具提示文本。

  • disableFullScreenTooltipText 禁用“关闭全屏模式”按钮的工具提示文本。

  • idText: “ID:”标签的文本。

  • spacing:用于附加边距的空间。

  • expandMonthTooltipText: “扩展月份”按钮的工具提示文本。

  • repeatEndsText: “重复结束:”标签的文本。

  • noEventsAvailableText: “无可用事件”标签的文本。

  • viewWeekEventsText: “查看周事件”标签的文本。

  • noEventsAvailableFullText: “没有可查看的事件”的文本。标签。

  • clickText: “点击”标签的文本。

  • hereText: “此处”标签的文本。

  • toAddANewEventText: “添加新事件”的文本。标签。

  • showAllDayEventDetailsInFullDayView:确定是否应在全天视图中显示全天事件的额外详细信息(默认为 false)。

  • showWeekNumbersInTitles:确定是否应在标题栏中显示周数(默认为 false)。

  • weekText: “周”标签的文本。

  • groupText:为“Group:”标签显示的文本。

  • configurationTooltipText: “配置”按钮的工具提示文本。

  • configurationTitleText: “配置”标签的文本。

  • visibleGroupsText “可见组:”标签的文本。

  • showTimelineArrowOnFullDayView:确定是否应在全天视图中显示时间线箭头(默认为 true)。

  • maximumEventTitleLength:指定事件标题允许的最大长度(默认为 0 以允许任何大小)。

  • maximumEventDescriptionLength:指定事件描述允许的最大长度(默认为 0 以允许任何大小)。

  • maximumEventLocationLength:指定事件位置允许的最大长度(默认为 0 以允许任何大小)。

  • maximumEventGroupLength:指定事件组允许的最大长度(默认为 0 以允许任何大小)。

  • eventNotificationsEnabled:确定是否应为事件显示通知(默认为 false)。

  • eventNotificationTitle:通知标题的文本(默认为“Calendar.js”)。

  • eventNotificationBody:通知正文的文本(默认为“事件'{0}'已开始。”)。

  • showDayNamesInMainDisplay:确定是否应在主显示中显示日期名称标题

  • showPreviousNextMonthNamesInMainDisplay:确定是否应在主显示日显示上/下个月名称

  • tooltipsEnabled:确定是否要启用工具提示

  • useOnlyDotEventsForMainDisplay:确定是否只应在主显示中使用点事件图标

  • visibleDays一组应该可见的天数

  • allowEventScrollingOnMainDisplay:判断主显示中的天数是否可以滚动

  • urlWindowTarget:默认为“_blank”。

  • defaultEventBackgroundColor:设置应用于事件的默认背景颜色(默认为“#484848”)。

  • defaultEventTextColor:设置用于事件的默认文本颜色(默认为“#F5F5F5”)。

  • defaultEventBorderColor:设置用于事件的默认边框颜色(默认为“#282828”)。

var calendarInstance = new calendarJs( "myCalendar", { 
    exportEventsEnabled: true, 
    manualEditingEnabled: true, 
    showTimesInMainCalendarEvents: false,
    minimumDayHeight: 0
})

7. 可用事件。

  • onPreviousMonth:按下“上个月”按钮时触发。

  • onNextMonth:按下“下个月”按钮时触发。

  • onPreviousYear:移动到上一年时触发。

  • onNextYear:移动到下一年时触发。

  • onToday:当“今天”按钮被按下时触发。

  • onEventAdded:添加事件时触发(将事件传递给函数)。

  • onEventUpdated:事件更新时触发(将事件传递给函数)。

  • onEventRemoved:删除事件时触发(将事件传递给函数)。

  • onEventsAdded:添加事件时触发(将事件传递给函数)。

  • onEventsCleared:清除事件时触发。

  • onEventsExported:按下“导出事件”按钮时触发。

  • onSetMonth:主显示屏上的日期在外部设置时触发。

  • onEventsSet:在设置事件并清除原始事件时触发(将事件传递给函数)

8. 公共方法。

// 上个月
calendarInstance.moveToPreviousMonth();
 
// 下个月
calendarInstance.moveToNextMonth();
 
// 上一年
calendarInstance.moveToPreviousYear();
 
// 明年
calendarInstance.moveToNextYear();
 
// 今天
calendarInstance.moveToToday();
 
// 获取当前日期
calendarInstance.getCurrentDisplayDate();
 
// 设置当前日期
calendarInstance.setCurrentDisplayDate(date);
 
// 导出所有事件
calendarInstance.exportAllEvents(type);
 
// 刷新
calendarInstance.refresh();
 
// 启用全屏 
calendarInstance.turnOnFullScreen();
 
// 退出全屏 
calendarInstance.turnOffFullScreen();
 
// 启动自动刷新定时器
calendarInstance.startTheAutoRefreshTimer();
 
// 停止自动刷新定时器
calendarInstance.stopTheAutoRefreshTimer();
 
// 移除一个事件
removeEvent(id, updateEvents, triggerEvent);
 
// 获取事件
calendarInstance.getEvents();
 
// 获取事件
calendarInstance.getEvent(id):
 
// 清除所有事件
calendarInstance.clearEvents(updateEvents);
 
// 更新事件
calendarInstance.updateEvent(id, event, updateEvents, triggerEvent);
calendarInstance.updateEvents(events, updateEvents, triggerEvent):
 
// 更新选项
calendarInstance.setOptions(options);
 
// 设置搜索选项
// triggerEvent: 如果“onSearchOptionsUpdated”事件应该被触发
calendarInstance.setSearchOptions({  matchCase: false,  showAdvanced: true,  searchTitle: true,  searchLocation: false,  searchDescription: false,  searchGroup: false,  searchUrl: false,  startsWith: false,  endsWith: false,  contains: true,}, triggerEvent);

// 添加新的假期
calendarInstance.addHolidays(holidays);
 
// 设置事件并清除任何现有事件
calendarInstance.setEvents(events, updateEvents, triggerEvent);
 
// 添加一组新事件
calendarInstance.addEvents(events, updateEvents, triggerEvent);
 
// 添加一个新事件
calendarInstance.addEvent(event, updateEvents, triggerEvent);
 
// 从/到日期更新现有事件
calendarInstance.updateEventDateTimes();
 
// 返回一个正在使用的组名数组
calendarInstance.getAllGroups();
 
// 清除所有事件组。
calendarInstance.clearAllGroups(updateEvents);
 
//销毁实例
calendarInstance.destroy();
 
// 返回当前版本
calendarInstance.getVersion();


官方网站:https://github.com/williamtroup/Calendar.js

相关热词: Calendar.js日历

声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库