Bryntum Calendar是一个Web组件，您可以用来显示和管理日历事件。它具有使用TypeScript以及有据可查的API的类型定义，使其易于与流行的库和框架集成，包括React和Vue.js。
Bryntum日历组件对需要向用户展示需要使用日历视图的资源管理的项目时间表或应用程序的项目管理应用程序有益。这包括提供医疗保健或家庭护理服务的申请，资源分配和协调至关重要。
在本文中，您将使用React，Tailwind CSS和Bryntum Calendar组件构建一个应用程序，以协调家庭成员的护理人员可用性。在这样做的过程中，您将了解使用JSON数据，创建状态的React组件以及使用Bryntum Calendar在日历视图中显示事件。
建立护理人员申请
在开始本教程之前，您需要Node.js版本14或更新的npm版本6或在计算机上安装了更新的版本。您还需要像Visual Studio Code这样的代码编辑器。
您可以使用此GitHub repository与本教程一起关注。
设置项目
要开始使用以下命令，以创建一个新的React项目caregiver-app，使用create-react-app：
npx create-react-app caregiver-app
然后将目录更改为新创建的项目：
cd caregiver-app
运行以下命令以安装尾风CSS及其依赖关系：
npm install -D tailwindcss postcss autoprefixer
接下来，运行npx tailwindcss init -p以初始化项目中的尾风CSS。此命令将生成tailwind.config.js和postcss.config.js文件，您可以在其中配置配色方案和插件。
在tailwind.config.js文件中更新content列表，以查看所有文件中的尾风CSS类更新：
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
最后，将@tailwind指令添加到./src/index.css，以便您可以在我们所有组件中使用尾风CSS类：
@tailwind base;
@tailwind components;
@tailwind utilities;
创建您的页面布局
现在您已经设置了该项目了，现在是时候在顶部创建一个带有导航栏的简单应用程序布局，并在下拉菜单中选择您所需的家庭成员。这是一个粗略的模拟：
在进一步发展之前，您需要一个数据源来获取护理人员列表和家庭成员的照料时间表。为此，创建一个新的src/data.json文件。 data.json有两个键：
-
Caregivers，护理人员详细信息对象 - 每个家庭成员的护理
schedules
每个护理时间表项目都有一个护理人员，使用resourceId属性链接到它，该属性映射到护理人员的id，如下所示。
caregivers对象结构如下：
{
"id": "steve", // unique resource id
"name": "Steve Rogers", // name of the caregiver
"eventColor": "blue" // color for the calendar event
}
schedule对象结构看起来像这样：
{
"<family-member>": [
{
"startDate": "<appointment-start-date>",
"id": "<unique-id-number>",
"endDate": "<appointment-start-date>",
"name": "<slot-name>",
"resourceId": "<caregiver-id>"
}
// ... more appointments
]
// ... other family member's schedules
}
您可以将以下JSON复制为data.json文件的示例数据。
{
"caregivers": [
{
"id": "steve",
"name": "Steve Rogers",
"eventColor": "blue"
},
{
"id": "tony",
"name": "Tony Stark",
"eventColor": "orange"
},
{
"id": "bruce",
"name": "Bruce Banner",
"eventColor": "green"
},
{
"id": "natasha",
"name": "Natasha Romano ff",
"eventColor": "pink"
}
],
"schedule": {
"Grand Pa": [
{
"startDate": "Thu Sep 08 2022 16:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 96,
"endDate": "Thu Sep 08 2022 18:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "tony"
},
{
"startDate": "Fri Sep 09 2022 06:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 91,
"endDate": "Fri Sep 09 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "natasha"
},
{
"startDate": "Thu Sep 08 2022 05:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 82,
"endDate": "Thu Sep 08 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "steve"
},
{
"startDate": "Mon Sep 05 2022 18:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 62,
"endDate": "Mon Sep 05 2022 20:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "bruce"
},
{
"startDate": "Tue Sep 06 2022 11:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 93,
"endDate": "Tue Sep 06 2022 12:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "tony"
},
{
"startDate": "Fri Sep 09 2022 08:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 2,
"endDate": "Fri Sep 09 2022 10:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "natasha"
},
{
"startDate": "Mon Sep 05 2022 16:30:00 GMT+0000 (Coordinated Universal Time)",
"id": 79,
"endDate": "Mon Sep 05 2022 17:30:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "bruce"
},
{
"startDate": "Sun Sep 04 2022 09:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 15,
"endDate": "Sun Sep 04 2022 10:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "natasha"
}
],
"Grand Ma": [
{
"startDate": "Fri Sep 09 2022 18:30:00 GMT+0000 (Coordinated Universal Time)",
"id": 12,
"endDate": "Fri Sep 09 2022 20:30:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "bruce"
},
{
"startDate": "Fri Sep 09 2022 17:30:00 GMT+0000 (Coordinated Universal Time)",
"id": 96,
"endDate": "Fri Sep 09 2022 19:30:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "natasha"
},
{
"startDate": "Mon Sep 05 2022 05:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 98,
"endDate": "Mon Sep 05 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "tony"
},
{
"startDate": "Fri Sep 09 2022 06:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 91,
"endDate": "Fri Sep 09 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "natasha"
},
{
"startDate": "Thu Sep 08 2022 05:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 65,
"endDate": "Thu Sep 08 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "steve"
},
{
"startDate": "Mon Sep 05 2022 18:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 62,
"endDate": "Mon Sep 05 2022 20:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "bruce"
},
{
"startDate": "Wed Sep 07 2022 11:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 18,
"endDate": "Wed Sep 07 2022 13:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "steve"
}
],
"Uncle": [
{
"startDate": "Sun Sep 04 2022 17:30:00 GMT+0000 (Coordinated Universal Time)",
"id": 47,
"endDate": "Sun Sep 04 2022 18:30:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "steve"
},
{
"startDate": "Tue Sep 06 2022 04:30:00 GMT+0000 (Coordinated Universal Time)",
"id": 24,
"endDate": "Tue Sep 06 2022 06:30:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "natasha"
},
{
"startDate": "Thu Sep 08 2022 06:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 83,
"endDate": "Thu Sep 08 2022 07:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "bruce"
},
{
"startDate": "Sun Sep 04 2022 16:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 52,
"endDate": "Sun Sep 04 2022 18:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "tony"
},
{
"startDate": "Wed Sep 07 2022 12:30:00 GMT+0000 (Coordinated Universal Time)",
"id": 53,
"endDate": "Wed Sep 07 2022 13:30:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "natasha"
},
{
"startDate": "Sun Sep 04 2022 04:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 48,
"endDate": "Sun Sep 04 2022 06:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "steve"
},
{
"startDate": "Sun Sep 04 2022 02:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 19,
"endDate": "Sun Sep 04 2022 03:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "tony"
}
],
"Dad": [
{
"startDate": "Fri Sep 09 2022 10:30:00 GMT+0000 (Coordinated Universal Time)",
"id": 86,
"endDate": "Fri Sep 09 2022 12:30:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "natasha"
},
{
"startDate": "Sun Sep 04 2022 12:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 26,
"endDate": "Sun Sep 04 2022 14:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "tony"
},
{
"startDate": "Wed Sep 07 2022 07:30:00 GMT+0000 (Coordinated Universal Time)",
"id": 87,
"endDate": "Wed Sep 07 2022 08:30:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "bruce"
},
{
"startDate": "Thu Sep 08 2022 20:30:00 GMT+0000 (Coordinated Universal Time)",
"id": 37,
"endDate": "Thu Sep 08 2022 21:30:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "natasha"
},
{
"startDate": "Mon Sep 05 2022 01:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 3,
"endDate": "Mon Sep 05 2022 02:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "tony"
},
{
"startDate": "Mon Sep 05 2022 00:00:00 GMT+0000 (Coordinated Universal Time)",
"id": 93,
"endDate": "Mon Sep 05 2022 01:00:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "steve"
},
{
"startDate": "Tue Sep 06 2022 08:30:00 GMT+0000 (Coordinated Universal Time)",
"id": 10,
"endDate": "Tue Sep 06 2022 10:30:00 GMT+0000 (Coordinated Universal Time)",
"name": "Caregiver assigned",
"resourceId": "bruce"
}
]
}
}
此示例使用静态JSON文件，但是您也可以将API或数据库用作源。
在App.js中导入data.json文件，并使用Object.keys方法检索成员列表：
import "./App.css";
import { useState } from "react";
import data from "./data.json";
const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object
然后使用尾风CSS类在顶部创建一个简单的导航栏：
import "./App.css";
import { useState } from "react";
import data from "./data.json";
const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object
function App() {
return (
<div className={"flex flex-col max-w-[1200px] mx-auto"}>
<nav
className={
"flex flex-row items-center bg-green-600 p-2 py-3 text-white shadow shadow-sm shadow-gray-500"
}
>
<p className={"text-lg"}>Caregiver PRO</p>
<p className={"mx-10"}>|</p>
<i className={"font-light text-sm"}>
We ensure the best care for your loved ones.
</i>
</nav>
</div>
);
}
export default App;
运行npm start开始应用程序：
现在，使用<select> HTML元素创建下拉菜单，并通过在ALL_MEMBERS数组上绘制<option>元素填充它：
import "./App.css";
import { useState } from "react";
import data from "./data.json";
const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object
function App() {
return (
<div className={"flex flex-col max-w-[1200px] mx-auto"}>
<nav
className={
"flex flex-row items-center bg-green-600 p-2 py-3 text-white shadow shadow-sm shadow-gray-500"
}
>
<p className={"text-lg"}>Caregiver PRO</p>
<p className={"mx-10"}>|</p>
<i className={"font-light text-sm"}>
We ensure the best care for your loved ones.
</i>
</nav>
<main className={"mt-10"}>
<div className={"mb-10"}>
<label htmlFor={"member"}>Select member</label>
<select
id={"member"}
value={member}
className={"ml-2 bg-gray-100 border-2 rounded border-green-600"}
>
{ALL_MEMBERS.map((member) => (
<option key={member} value={member}>
{member}
</option>
))}
</select>
</div>
<div className={"bg-gray-200 h-[500px] text-lg"}>
Calendar goes here
</div>
</main>
</div>
);
}
export default App;
使用useState React Hook创建一个member状态变量，以允许用户选择家庭成员。每当用户选择一个新成员时，将onChange事件处理程序添加到<select>元素以更新member状态：
import "./App.css";
import { useState } from "react";
import data from "./data.json";
const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object
function App() {
const [member, setMember] = useState("Grand Ma");
return (
<div className={"flex flex-col max-w-[1200px] mx-auto"}>
<nav
className={
"flex flex-row items-center bg-green-600 p-2 py-3 text-white shadow shadow-sm shadow-gray-500"
}
>
<p className={"text-lg"}>Caregiver PRO</p>
<p className={"mx-10"}>|</p>
<i className={"font-light text-sm"}>
We ensure the best care for your loved ones.
</i>
</nav>
<main className={"mt-10"}>
<div className={"mb-10"}>
<label htmlFor={"member"}>Select member</label>
<select
id={"member"}
value={member}
onChange={(e) => setMember(e.target.value)}
className={"ml-2 bg-gray-100 border-2 rounded border-green-600"}
>
{ALL_MEMBERS.map((member) => (
<option key={member} value={member}>
{member}
</option>
))}
</select>
</div>
<div className={"bg-gray-200 h-[500px] text-lg"}>
Calendar goes here
</div>
</main>
</div>
);
}
export default App;
应用程序布局已准备就绪。现在，您需要插入Bryntum日历以显示用户友好的时间表。
添加Bryntum日历布局
要添加Bryntum日历布局，您需要注册free trial of the Bryntum Calendar。 Bryntum使用私有注册表提供日历组件，因此您需要使用以下命令将注册表URL指定到npm：
npm config set "@bryntum:registry=https://npm.bryntum.com"
由于Bryntum的注册表已进行身份验证，因此您需要使用注册的凭据：
npm login --registry=https://npm.bryntum.com
请注意：“@”应在登录电子邮件中替换为“ ..”。例如，“ someone@example.com”将成为“某人..example.com”，“试用”作为密码。
现在，运行以下命令安装bryntum日历依赖项：
npm i @bryntum/calendar@npm:@bryntum/calendar-trial@^5.1.2 @bryntum/calendar-react@5.1.2
在index.css文件中导入bryntum日历的斯德哥尔摩主题：
@tailwind base;
@tailwind components;
@tailwind utilities;
@import "@bryntum/calendar/calendar.stockholm.css"; # add this line
然后在App.js文件中导入BryntumCalendar组件，并使用CALENDAR_CONFIG对象创建日历将打开的CALENDAR_CONFIG对象：
import "./App.css";
import { useState } from "react";
import data from "./data.json";
import { BryntumCalendar } from "@bryntum/calendar-react";
const CALENDAR_CONFIG = {
date: new Date(2022, 8, 4), // calendar will open at this date
};
const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object
将CALENDAR_CONFIG作为config，caregivers作为resources和data.schedule[member]作为events prop to BryntumCalendar：
import "./App.css";
import { useState } from "react";
import data from "./data.json";
import { BryntumCalendar } from "@bryntum/calendar-react";
const CALENDAR_CONFIG = {
date: new Date(2022, 8, 4),
};
const ALL_MEMBERS = Object.keys(data.schedule); // get list of members from object
function App() {
const [member, setMember] = useState("Grand Ma");
return (
<div className={"flex flex-col max-w-[1200px] mx-auto"}>
<nav
className={
"flex flex-row items-center bg-green-600 p-2 py-3 text-white shadow shadow-sm shadow-gray-500"
}
>
<p className={"text-lg"}>Caregiver PRO</p>
<p className={"mx-10"}>|</p>
<i className={"font-light text-sm"}>
We ensure the best care for your loved ones.
</i>
</nav>
<main className={"mt-10"}>
<div className={"mb-10"}>
<label htmlFor={"member"}>Select member</label>
<select
id={"member"}
value={member}
onChange={(e) => setMember(e.target.value)}
className={"ml-2 bg-gray-100 border-2 rounded border-green-600"}
>
{ALL_MEMBERS.map((member) => (
<option key={member} value={member}>
{member}
</option>
))}
</select>
</div>
<BryntumCalendar
config={CALENDAR_CONFIG}
resources={data.caregivers}
events={data.schedule[member]}
/>
</main>
</div>
);
}
export default App;
在这种情况下，由于member处于React状态，每当用户从下拉菜单中选择新成员时，日历将重新渲染并显示所选成员的护理人员时间表。在最后一步，护理人员专业人员已经准备好：
用户可以通过检查缺失的老虎机并在预约时从列表中选择护理人员来添加新的护理人员约会。或者他们可以将视图更改为每天或每月，或者通过选择议程视图。
将其视为列表。在这里，您可以看到Caregiver Pro在行动中：
结论
本教程完成后，您将拥有一个功能齐全的护理人员专业应用程序。为了创建此应用程序，您了解了如何使用Tailwind CSS样式设置React项目，然后使用JSON文件作为数据源来显示事件列表。稍后，您使用Bryntum Calendar组件来显示日历事件，并使家庭成员的预订护理人员更简单。您可以进一步扩展此示例，并使用Bryntum Calendar events从远程API读取或存储事件。
您已经使用了bryntum日历了吗？我们很想听听是如何是making your life easier。
Bryntum是一家专门创建精美和表现的Web组件的软件公司，包括Calendar，Scheduler和Gantt图表。想了解更多吗？在bryntum.com尝试我们的日程安排和甘特组件。