简介
angular-calendar-temp 是一个基于Angular框架的日历组件，其可以提供月、周、日三种不同形式的日历视图，方便开发者快速实现日历功能。
安装
安装angular-calendar-temp可通过npm包管理器安装，打开命令行工具输入以下命令即可安装：
npm install angular-calendar-temp --save
使用
引入
在引入组件前，需要先在 angular.json 文件里进行配置：
"styles": [ "src/styles.css" ], "scripts": [ "node_modules/date-fns/date_fns.js" ]
然后在需要使用该组件的模块中引入：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - ------------- - ---- ----------------------------
------ - ------------ - ---- ------------------
------ - -------------- - ---- ------------------------
-----------
-------- -
--------------
------------------------
--
------------- ---------------
---------- --------------
--
------ ----- --------- - -HTML代码
在HTML中添加以下代码即可使用日历组件：
-- -------------------- ---- ------- ------------------------ --------------------- --------------------------- ----------------- ----------------------------- ------------------ ----------------- ------------------------------------- -------------------------------------------- --------------------------
TS代码
在ts文件中需要注入日期工具和日历视图服务，示例代码如下：
-- -------------------- ---- -------
------ - ---------- ------------------------ ---------- ----------- - ---- ----------------
------ - -------------------- - ---- ------------------------
------ - -------- ------ ------ ----------- ------- - ---- ----------------------
------ - ------- - ---- -------
------ - ------------- -------------- ---------------------------------- - ---- ------------------------
------ - -------- --------- ---------- ----------- --------- ------------ ---------- ------------- ----------- ---------- ----------- - ---- -----------
------ - --------------- - ---- ---------------------
------------
--------- -----------
------------ -----------------------
---------- ------------------------
---------------- -------------------------------
----------- -
-------------------- -
------------ ------- -------- - ----
--------------- -- ---- -------------- -----------
-------------- -- ----- -------------- -----------
--
-
--
------ ----- ------------ -
----- ------------ - -------------------
--------- ---- - --- -------
------- --------------- - ---
------------- ----- - ---
------------------- ---------------- ---------------- --
---------- -
--------------------------------------------------- ---- -- -
----------- - -------
----------------- - -
-
------ --- --------- -----------------
-------- -- ----- -- - ------ ------------- --- ---- -- -
----------------- ------- -------
-
--
-
------ --- --------- ----------------
-------- -- ----- -- - ------ ------------- --- ---- -- -
------------------- ------- -------
-
-
--
---
-
--------------- ---------------------- ---- -
-------------------- ----- -----
-
------------------- --------------- ---- -
-------------------- ------- -------
-
-三种视图
月视图
月视图是提供日历的一种方式，它展示了整个月份的日历布局，是最基础的日历视图，通过上下左右箭头切换月份。
-- -------------------- ---- ------- ------------------------ --------------------- --------------------------- ----------------- ----------------------------- ------------------ ----------------- ------------------------------------- -------------------------------------------- --------------------------
周视图
周视图是在月视图基础上改版，它将日期从上下切换到左右，以时间轴的形式展示所选时间内的时间段中的日历。
-- -------------------- ---- ------- ----------------------- --------------------- --------------------------- ----------------- ----------------------------- ------------------ ----------------- ------------------------------------- -------------------------------------------- -------------------------
日视图
日视图是最简单的日历视图，是为了展示单日日历而存在的，展示了一天中的所有事件，支持日程编辑、删除操作。
-- -------------------- ---- ------- ---------------------- --------------------- ----------------- ----------------------------- ------------------ ----------------- ------------------------------------- -------------------------------------------- ------------------------
总结
angular-calendar-temp已经成为了Angular框架中非常受欢迎的日程管理器，它不仅仅是一个基于日历的插件，而且它支持绝大多数常用的高级日历功能，例如任务提醒、月视图、周视图、日视图、日历编辑、任务归档等等，以及许多定制化选项，是开发者日程管理相关工作的不二之选。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b0981e8991b448d8af4