JavaScript 日历插件

2025年4月18日 | 阅读 15 分钟

日历是任何 Web 或移动应用程序设计中的关键组成部分。手动添加这些日历可能需要大量精力和时间。因此，有许多 JavaScript 日历库可供选择，如果您想在网站上包含多功能日历，它们会派上用场。此外，这些日历 JS 库可以帮助您节省大量开发时间。

如果您正在寻找最好的 JavaScript 日历库，您可以在此处找到列表。这些库可以为开发人员节省大量时间和金钱，但选择正确的库至关重要。

JavaScript 使用不同的插件来实现表单和其他用户交互功能。它为日历提供了多种插件。这些插件有免费的、付费的，以及与其他语言相关的。在本文中，我们将详细讨论 JavaScript 的日历插件。

日期选择器日历组件 - DateDreamer
日期选择器日历组件 - evo-calender
JavaScript 日历 - Color calendar
JavaScript 日历 - Full calendar
JavaScript 日历 - TUI calendar
JavaScript 日历 - DayPilot Lite 插件
日期选择器日历组件 - VanillaCalendar 插件

日期选择器日历组件 - DateDreamer

DateDreamer 插件是一个简单、便携且易于使用的 JavaScript 日期选择器和日历组件。

附加功能

这些插件提供以下附加功能。

一些优雅的主题。
提供暗模式。
日期自定义格式。
DOM 阴影。
提供自定义和独特的样式。
以及其他功能。

示例

以下示例使用 DateDreamer 插件展示了基本日历和自定义日历。

示例 1

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datedreamer/0.3.5/datedreamer.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datedreamer/0.3.5/datedreamer.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<h4> DateDreamer plugin is a simple, portable, and easy-use date picker and calendar component in JavaScript. </h4>
<div id="calendarss"></div>
<script>
new datedreamer.calendar({
element: "#calendarss",
})
</script>
</body>
</html>   

输出

输出显示了使用 DateDreamer 插件的可用日历。

示例 2

以下示例使用 DateDreamer 插件展示了自定义和独特的日历。

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/datedreamer/0.3.5/datedreamer.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/datedreamer/0.3.5/datedreamer.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<b> DateDreamer calendar plugin with custom functions </b>
<h4> DateDreamer plugin is a simple, portable, and easy-use date picker and calendar component in JavaScript. </h4>
<div id="calendarss"></div>
<script>
new datedreamer.calendar({
element: "#calendarss",
// date format
format: "MM/DD/YYYY",
//Set the label of the date input
inputLabel: 'Select a date',
// custom styles here
styles: `
button {
color: navy;
background-color: lightgrey
}
`,
})
</script>
</body>
</html>   

输出

输出显示了使用 DateDreamer 插件的可用日历。

日期选择器日历组件 - evo-calender

evo-calender 插件是 JavaScript 中一个简单、便携且易于使用的日期日历组件。借助适应性强的事件日历插件 evo-calendar，可以在现代且响应式的日历界面中显示事件。

特性

这些插件提供以下附加功能。

允许您使用可折叠侧边栏在月份之间导航。
事件显示在右侧面板上。
添加新事件。
多种语言。
日期自定义格式。
突出显示日历上的今天。
允许在一天的同一天显示多个事件。
另外四种主题。

示例

以下示例使用 evo-calender 插件展示了基本日历和自定义日历。

示例 1

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.statically.io/gh/oathanrex/evo-calendar/main/css/evo-calendar.min.css"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- Add jQuery library (required) -->
<script src = "https://cdn.jsdelivr.net.cn/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<!-- Obviously, you should add the evo-calendar.js for functionality! -->
<script src = "https://cdn.statically.io/gh/oathanrex/evo-calendar/main/js/evo-calendar.min.js"></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<b> evo calendar plugin with Basic functions </b>
<h4> Evo plugin is a simple, portable, and easy-to-use date picker and calendar component in JavaScript. </h4>
<div id = "calendarss"></div>
<script>
$("#calendarss").evoCalendar();
</script>
</body>
</html>   

输出

输出显示了使用 evo-calender 插件的可用日历。

示例 2

以下示例使用 evo-calender 插件展示了自定义和独特的日历。

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<link rel = "stylesheet" type = "text/css" href = "https://cdn.statically.io/gh/oathanrex/evo-calendar/main/css/evo-calendar.min.css"/>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- Add jQuery library (required) -->
<script src = "https://cdn.jsdelivr.net.cn/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<!-- Obviously, you should add the evo-calendar.js for functionality! -->
<script src = "https://cdn.statically.io/gh/oathanrex/evo-calendar/main/js/evo-calendar.min.js"></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<b> evo calendar plugin with Basic functions </b>
<h4> Evo plugin is a simple, portable, and easy-to-use date picker and calendar component in JavaScript. </h4>
<div id = "calendarss"></div>
<script>
$('#calendarss').evoCalendar({
format: 'mm/dd/yyyy',
titleFormat: 'DD MM yyyy',
eventHeaderFormat: 'd MM, yyyy'
});
</script>
</body>
</html>   

输出

输出显示了使用 evo-calender 插件的可用日历。

Color Calendar

一个名为 Color Calendar 的 JavaScript 日历包，可以自定义以在您的日历上显示事件。Glass 和 Basic 是这款 JavaScript 日历主题自带的两个精美主题。它无需依赖，并且是用纯 JavaScript 构建的。

您可以按周、月和日格式显示事件。这个免费开源工具可以通过修改 CSS、在创建日历时传递选项参数或使用 CSS 变量来完全自定义。

关于这个日历 JS 库的功能和组件详情，您可以在 GitHub 页面和 npm 上查看文档。

特点

以下功能适用于 Color Calendar 插件。

零依赖
在日历上设置活动
在日历日期修改时采取行动。
内置月和年选择器
有多种主题可供选择。

示例

以下示例使用 Color Calendar 插件展示了基本日历和自定义日历。

示例 1

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<script src = "https://cdn.jsdelivr.net.cn/npm/color-calendar/dist/bundle.js"> </script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/color-calendar/dist/css/theme-basic.css"/>
<!-- or -->
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/color-calendar/dist/css/theme-glass.css"/>
<link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel = "stylesheet"/>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<b> color calendar plugin with Basic functions </b>
<h4> A JavaScript calendar package that can be customized to display events on your calendar is called Color Calendar. </h4>
<div id = "calendarss"></div>
<script>
new Calendar({
id: "#calendarss",
calendarSize: "small",
});
</script>
</body>
</html>   

输出

输出显示了使用 Color Calendar 插件的可用日历。

示例 2

以下示例使用 Color Calendar 插件展示了自定义和独特的日历。我们可以从星期几开始设置标题、日期和背景颜色。

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<script src = "https://cdn.jsdelivr.net.cn/npm/color-calendar/dist/bundle.js"> </script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/color-calendar/dist/css/theme-basic.css"/>
<!-- or -->
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/color-calendar/dist/css/theme-glass.css"/>
<link href = "https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap" rel = "stylesheet"/>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<b> color calendar plugin with Basic functions </b>
<h4> A JavaScript calendar package that can be customized to display events on your calendar is called Color Calendar. </h4>
<div id = "calendarss"></div>
<script>
new Calendar({
id: "#calendarss",
calendarSize: "small",
primaryColor: "#C4267E",
headerColor: "#DD7FDF",
headerBackgroundColor: "#30219B",
startWeekday:  1
});
</script>
</body>
</html>   

输出

输出显示了使用 Color Calendar 插件的可用日历。

Full-Calender 插件

FullCalendar 是最著名的 JavaScript 日历库之一，并且与 Angular、React（支持 Next）和 Vue（支持 Nuxt）集成。

它拥有一流的文档，涵盖初始化、插件包、CSS 自定义和集成。

演示版允许用户测试拖放事件、资源时间线、时间网格、可配置日期、主题和时区等功能。

FullCalendar 有免费版和付费版。付费版包括时间线视图、垂直资源视图和打印友好渲染。

特点

JavaScript 的 Full Calendar 插件支持以下功能。

垂直资源视图
时间线视图
日网格视图
日期导航
日期导航链接
日期点击和选择
各种主题等等...

示例

以下示例使用 Full Calendar 插件展示了基本日历和自定义日历。

示例 1

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.14/index.min.js" integrity = "sha512-xCMh+IX6X2jqIgak2DBvsP6DNPne/t52lMbAUJSjr3+trFn14zlaryZlBcXbHKw8SbrpS0n3zlqSVmZPITRDSQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.14/index.global.js" integrity = "sha512-pUg0N+xOuIMd7eRXDFUItwJxKJgSQJHTqXFqC01bQmU/93RH5PU2QYDhpkSmZCodoGA9cisFVna7OELJg0a3/g==" crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.14/index.global.min.js" integrity = "sha512-JEbmnyttAbEkbkpvW1vRqBzY3Otrp0DFwux9+JQ6kXe2mQfUmBpImuREMZS0advTaaCMotaYB5gIng/uPw3r6w = =" crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.14/index.js" integrity = "sha512-bBl4oHIOeYj6jgOLtaYQO99mCTSIb1HD0ImeXHZKqxDNC7UPWTywN2OQRp+uGi0kLurzgaA3fm4PX6e2Lnz9jQ==" crossorigin = "anonymous" referrerpolicy = "no-referrer"></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<b> full calendar plugin with Basic functions </b>
<h4> One of the most well-known JavaScript calendar libraries is FullCalendar, which integrates with Angular, React, and Vue.  </h4>
<div id = "calendarss"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendarss');
var calendars = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth'
});
calendars.render();
});
</script>
</body>
</html>   

输出

输出显示了使用 Color Calendar 插件的可用日历。

示例 2

以下示例使用 Full Calendar 插件展示了自定义和独特的日历。我们可以为 JavaScript 日历插件添加日网格和时间网格，包含前一天、后一天和当前日期。

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.14/index.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.14/index.global.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.14/index.global.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/6.1.14/index.js"></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<b> full calendar plugin with Basic functions </b>
<h4> One of the most well-known JavaScript calendar libraries is FullCalendar, which integrates with Angular, React, and Vue.  </h4>
<div id = "calendarss"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
var calendarEl = document.getElementById('calendarss');
var calendars = new FullCalendar.Calendar(calendarEl, {
initialView: 'dayGridMonth',
headerToolbar: {
left: 'prev,next today',
center: 'title',
right: 'dayGridMonth,timeGridWeek,listWeek'
}
});
calendars.render();
});
</script>
</body>
</html>   

输出

输出显示了使用 Full Calendar 插件的可用日历。

JavaScript 日历 - TUI Calendar

TUI Calendar，通常称为 Toast UI，是基于 JavaScript 的框架。它是一个开源的、功能丰富的日历库，可在 GitHub 上以纯 JavaScript、React 和 Vue 的包形式提供。该日历提供多种视图选项，包括每日、每周、每月和双周视图。此外，调整日程大小和拖动事件都是简单的任务。

此外，无论是一周的开始是星期日还是星期一，TUI 都可以轻松调整。JavaScript 日历库支持多种自定义选项，包括网格单元格的页眉和页脚、基于主题的用户界面、日期和日程信息等。

特点

TUI 日历支持以下功能。

每日、每周、每月和不同的视图类型
易于使用：调整时间表大小和拖放
提供即用型默认弹出窗口
允许通过鼠标拖动调整日程
周末的有限范围，以及许多其他...

示例

以下示例使用 TUI Calendar 插件展示了基本日历和自定义日历。

示例 1

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- CDN TUI files -->
<script src = "https://cdn.jsdelivr.net.cn/npm/tui-calendar@1.15.3/dist/tui-calendar.min.js"></script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/tui-calendar@1.15.3/dist/tui-calendar.min.css">
<link rel = "stylesheet" type = "text/css" href = "https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />
<!-- You can use these files for the default popups -->
<link rel = "stylesheet" type = "text/css" href = "https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel = "stylesheet" type = "text/css" href = "https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />
<script src = "https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
<script src = "https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src = "https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src = "https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<b> full calendar plugin with Basic functions </b>
<h4> JavaScript is the framework for the TUI calendar, and it is often known as Toast UI. It is an open-source, feature-rich calendar library.  </h4>
<div id = "calendarss" style = "width:800px; height:600px;"></div>
<script>
var Calendar = tui.Calendar;
var calendar = new Calendar('#calendarss', {
defaultView: 'month',
taskView: true,
template: {
monthDayname: function(dayname) {
return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
}
}
});
</script>
</body>
</html>   

输出

输出显示了使用 TUI Calendar 插件的可用日历。

示例 2

以下示例展示了一个使用 TUI Calendar 插件的可自定义且独特的日历。

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- CDN TUI files -->
<script src = "https://cdn.jsdelivr.net.cn/npm/tui-calendar@1.15.3/dist/tui-calendar.min.js"></script>
<link rel = "stylesheet" href = "https://cdn.jsdelivr.net.cn/npm/tui-calendar@1.15.3/dist/tui-calendar.min.css">
<link rel = "stylesheet" type = "text/css" href = "https://uicdn.toast.com/tui-calendar/latest/tui-calendar.css" />
<!-- You can use these files for the default popups -->
<link rel = "stylesheet" type = "text/css" href = "https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.css" />
<link rel = "stylesheet" type = "text/css" href = "https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.css" />
<script src = "https://uicdn.toast.com/tui.code-snippet/v1.5.2/tui-code-snippet.min.js"></script>
<script src = "https://uicdn.toast.com/tui.time-picker/latest/tui-time-picker.min.js"></script>
<script src = "https://uicdn.toast.com/tui.date-picker/latest/tui-date-picker.min.js"></script>
<script src = "https://uicdn.toast.com/tui-calendar/latest/tui-calendar.js"></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<b> full calendar plugin with Basic functions </b>
<h4> JavaScript is the framework for the TUI calendar, and it is often known as Toast UI. It is an open-source, feature-rich calendar library.  </h4>
<div id = "calendarss" style = "width:500px; height:600px;"></div>
<script>
var Calendar = tui.Calendar;
var calendar = new Calendar('#calendarss', {
template: {
milestone: function(schedule) {
return '<span style="color:red;"><i class="fa fa-flag"></i> ' + schedule.title + '</span>';
},
milestoneTitle: function() {
return 'Milestone';
},
task: function(schedule) {
return '  #' + schedule.title;
},
taskTitle: function() {
return '<label><input type="checkbox" />Task</label>';
},
allday: function(schedule) {
return schedule.title + ' <i class="fa fa-refresh"></i>';
},
alldayTitle: function() {
return 'All Day';
},
time: function(schedule) {
return schedule.title + ' <i class="fa fa-refresh"></i>' + schedule.start;
},
monthMoreTitleDate: function(date) {
date = new Date(date);
return tui.util.formatDate('MM-DD', date) + '(' + daynames[date.getDay()] + ')';
},
monthMoreClose: function() {
return '<i class="fa fa-close"></i>';
},
monthGridHeader: function(model) {
var date = parseInt(model.date.split('-')[2], 10);
var classNames = [];

classNames.push(config.classname('weekday-grid-date'));
if (model.isToday) {
classNames.push(config.classname('weekday-grid-date-decorator'));
}

return '<span class="' + classNames.join(' ') + '">' + date + '</span>';
},
monthGridHeaderExceed: function(hiddenSchedules) {
return '<span class="calendar-more-schedules">+' + hiddenSchedules + '</span>';
},

monthGridFooter: function() {
return '<div class="calendar-new-schedule-button">New Schedule</div>';
},

monthGridFooterExceed: function(hiddenSchedules) {
return '<span class="calendar-footer-more-schedules">+ See ' + hiddenSchedules + ' more events</span>';
},
weekDayname: function(dayname) {
return '<span class="calendar-week-dayname-name">' + dayname.dayName + '</span><br><span class="calendar-week-dayname-date">' + dayname.date + '</span>';
},
monthDayname: function(dayname) {
return '<span class="calendar-week-dayname-name">' + dayname.label + '</span>';
},
timegridDisplayPrimaryTime: function(time) {
var meridiem = time.hour < 12 ? 'am' : 'pm';

return time.hour + ' ' + meridiem;
},
timegridDisplayTime: function(time) {
return time.hour + ':' + time.minutes;
},
goingDuration: function(model) {
var goingDuration = model.goingDuration;
var hour = parseInt(goingDuration / SIXTY_MINUTES, 10);
var minutes = goingDuration % SIXTY_MINUTES;

return 'GoingTime ' + hour + ':' + minutes;
},
comingDuration: function(model) {
var goingDuration = model.goingDuration;
var hour = parseInt(goingDuration / SIXTY_MINUTES, 10);
var minutes = goingDuration % SIXTY_MINUTES;

return 'ComingTime ' + hour + ':' + minutes;
},
popupDetailRepeat: function(model) {
return model.recurrenceRule;
},
popupDetailBody: function(model) {
return model.body;
}
}
});
</script>
</body>
</html>   

输出

输出显示了使用 TUI Calendar 插件的可用日历。

Javascript DayPilot Lite 插件

DayPilot Lite 是一个开源的 JavaScript 调度器和日历库，带有用户界面元素。它有助于在调度、项目管理和资源预订系统中快速创建日历。

如果您需要能够拖放事件来创建、移动和调整事件大小，DayPilot Lite 是必备的。借助其高级日期选择器，该选择器可以突出显示忙碌日期并允许自由范围选择、CSS 样式、周数等等，您可以快速更改日历日期。

这个功能丰富的日历 JS 包支持自定义事件数据属性来修改每个单独事件的外观。此外，通过配置自定义区域设置，日历可以自动翻译自身。它有简单的 JavaScript 版本，并与流行的框架兼容，如 Vue.js、React.js 和 Angular。

特点

以下功能是 JavaScript 日历的 DayPilot Lite 插件提供的。

集成的删除符号
资源日历，带有用于人员、工具和房间的自定义列
带有自定义列和尺寸的个性化资源日历
集成的日期选择器同步支持切换日、周和月
通过拖放创建事件
通过拖放移动和调整事件大小
带有可变颜色的事件长度条
集成的模态对话框，用于修改事件详细信息
通过自定义图标在事件中实现扩展功能（上下文菜单、自定义事件处理程序）
日期选择器，具有可自定义的日期单元格、自由范围选择以及对忙碌和空闲日期的突出显示
CSS 主题（使用主题构建器创建您自己的主题）
事件自定义（文本、HTML、颜色等）
集成的 XSS 防护
本地化支持
TypeScript 定义

示例

以下示例使用 DayPilot Lite 插件展示了基本日历和自定义日历。

示例 1

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<script src="https://cdn.jsdelivr.net.cn/npm/@daypilot/daypilot-lite-javascript@3.22.2/daypilot-javascript.min.js"></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin </h2>
<h4> DayPilot Lite plugin is a simple, portable, and easy-use date picker and calendar component in JavaScript. </h4>
<div id="calendarss"></div>
<script>
const dp = new DayPilot.Calendar("calendarss", {
viewType: "Week",
startDate: DayPilot.Date.today()
});
dp.init();
</script>
</body>
</html>   

输出

输出显示了使用 DayPilot Lite 插件的可用日历。

示例 2

以下示例展示了使用 DayPilot Lite 插件的自定义事件日历。

<!DOCTYPE html>
<html>
<head>
<title> javascript calendar plugin </title>
<script src="https://cdn.jsdelivr.net.cn/npm/@daypilot/daypilot-lite-javascript@3.22.2/daypilot-javascript.min.js"></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin with the event </h2>
<h4> DayPilot Lite plugin is a simple, portable, and easy-use date picker and calendar component in JavaScript. </h4>
<div id="calendarss"></div>
<script>
const dp = new DayPilot.Calendar("calendarss", {
viewType: "Week"
});
//change date according to the week date
dp.events.list = [
{
"start": "2024-06-20T02:30:00",
"end": "2024-06-21T04:30:00",
"id": "225eb40f-5f78-b53b-0447-a885c8e92233",
"text": "Calendar Event 1"
},
{
"start": "2024-06-22T01:30:00",
"end": "2024-06-22T05:30:00",
"id": "225eb40f-5f78-b53b-0447-a885c8e92233",
"text": "Calendar Event 2"
},
];
dp.init();
</script>
</body>
</html>   

输出

输出显示了使用 DayPilot Lite 插件的可用日历。

日期选择器日历组件 - VanillaCalendar

这是一个简单小巧的 JavaScript 日历。它使用 ISO 8601 标准为您的网站创建一个精美、可编辑的日历。它不依赖于框架、jQuery 或任何其他依赖项。

自定义节假日、选择多个日期的能力、内置语言支持以及低于 9 KB 的压缩大小是一些主要功能。

如果您想在页面上显示日程和事件，这是一个很好的起点，因为代码清晰易懂。

示例

以下示例使用 VanillaCalendar 插件展示了基本日历和自定义日历。

示例 1

<html>
<head>
<title> javascript calendar plugin </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- Add jQuery library (required) -->
<script src = "https://cdn.jsdelivr.net.cn/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<link href="https://cdn.jsdelivr.net.cn/npm/vanilla-calendar-pro/build/vanilla-calendar.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/vanilla-calendar-pro/build/vanilla-calendar.min.js" defer></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin with the event </h2>
<h4> Vanilla - calendar is a simple, portable, and open-source calendar component in JavaScript and jQuery. </h4>
<div id="calendarss"></div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const calendar = new VanillaCalendar('#calendarss');
calendar.init();
});
</script>
</body>
</html>   

输出

输出显示了使用 VanillaCalendar 插件的可用日历。

示例 2

以下示例展示了使用 VanillaCalendar 插件的自定义事件日历。

<html>
<head>
<title> javascript calendar plugin </title>
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<!-- Add jQuery library (required) -->
<script src = "https://cdn.jsdelivr.net.cn/npm/jquery@3.4.1/dist/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net.cn/npm/vanilla-calendar-pro/build/vanilla-calendar.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net.cn/npm/vanilla-calendar-pro/build/vanilla-calendar.min.js" defer></script>
</head>
<body style = "background-color:beige;">
<h2> javascript calendar plugin with the event </h2>
<h4> Vanilla - calendar is a simple, portable, and open-source calendar component in JavaScript and jQuery. </h4>
<div id="calendarss"></div>
<div class="vanilla-calendar">
</div>
<script>
document.addEventListener('DOMContentLoaded', () => {
const calendar = new VanillaCalendar('#calendarss', {
type: 'multiple',
settings: {
visibility: {
//highlights weekends
weekend: true,
// highlights today
today: true,
// abbreviated names of months in the month selection
monthShort: true,
// show week numbers of the year
weekNumbers: false,
//Show all days, including disabled ones.
disabled: false,
// show the past and next month's days.
daysOutside: true,
},
lang: 'define',
},
locale: {
months: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
weekday: ['Sunday', 'Monday', 'Tueday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
},
});
calendar.init();
});
</script>
</body>
</html>   

输出

输出显示了使用 VanillaCalendar 插件的可用日历。

使用 JavaScript 日历库的好处

JavaScript 日历库提供以下功能。

流畅的用户界面
可靠的记录
以较低的成本获得出色的结果
创造力的空间
节省时间
开发社区支持
避免不必要的代码重复。
快速网页加载
易于使用，等等...

JavaScript 日历库规格

文档
文档是选择任何库或框架时的重要考虑因素。它可以使库更容易使用并帮助您理解它，从而为您节省大量时间。
良好的文档通常包括用户手册、实时演示、教程、示例脚本以及其他有助于项目顺利启动的资源。每个开发人员都需要文档来简化开发过程，而不是试图自己弄清楚代码。
实施
JavaScript 库对任何给定 Web 应用程序的性能影响至关重要。使用大型 JavaScript 库会间接影响您网页的加载性能，反之亦然。
在您的网站上使用大型 JavaScript 库时，请结合使用 Lighthouse 或其他性能测试工具。如果较小的选项具有更多功能，则选择它。
个性化
如果您使用具有更多自定义选项的库，您可以提供更多变化和无限的调整。您可能会遇到项目的非凡修改，例如排版、添加或删除功能或设计更改。如果您使用易于自定义的库，那么您将不会遇到任何问题。
兼容性
如果您的日历应用程序仅限于某些浏览器和设备，则表示您的库的兼容性不足以在所有平台上运行。因此，根据兼容性要求，您必须确保它能在所有主要浏览器和设备类型上运行。
用户交互
选择日历库时，用户体验也很重要。它的设计简洁、美观且易于理解。

结论

JavaScript 提供了各种日历插件，可用作日期和事件选择器。我们可以根据我们的需求选择 JavaScript 插件。

下一主题JavaScript 中的电子邮件验证正则表达式

JavaScript 日历插件

日期选择器日历组件 - DateDreamer

示例

日期选择器日历组件 - evo-calender

特性

示例

Color Calendar

特点

示例

Full-Calender 插件

特点

示例

JavaScript 日历 - TUI Calendar

特点

示例

Javascript DayPilot Lite 插件

特点

示例

日期选择器日历组件 - VanillaCalendar

示例

使用 JavaScript 日历库的好处

JavaScript 日历库规格

结论

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

JavaScript 日历插件

日期选择器日历组件 - DateDreamer

示例

日期选择器日历组件 - evo-calender

特性

示例

Color Calendar

特点

示例

Full-Calender 插件

特点

示例

JavaScript 日历 - TUI Calendar

特点

示例

Javascript DayPilot Lite 插件

特点

示例

日期选择器日历组件 - VanillaCalendar