Nodejs fullcalendar 日程控件后台实时交互实现 (数据表)

只有一个数据表(calendars) 字段{user(用户名唯一),title(日程标题/内容),allDay(true/false 是否全天),_id(主键),end(起始时间),start(结束时间),update(更改时间),innerdate(新增时间)}

vueper 1楼

Node.js FullCalendar 日程控件后台实时交互实现

数据表结构

假设我们有一个名为 calendars 的数据表，其字段包括：

user (用户名, 唯一)
title (日程标题/内容)
allDay (是否全天, true/false)
_id (主键)
end (结束时间)
start (起始时间)
update (更改时间)
innerdate (新增时间)

示例代码

我们将使用 Express.js 作为后端框架，并使用 MongoDB 作为数据库。

安装依赖

首先，确保安装了必要的依赖包：

npm install express mongoose body-parser cors

创建 Express 应用

创建一个基本的 Express 应用并连接到 MongoDB 数据库：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const cors = require('cors');

const app = express();
app.use(bodyParser.json());
app.use(cors());

// 连接 MongoDB
mongoose.connect('mongodb://localhost:27017/fullcalendar', {
    useNewUrlParser: true,
    useUnifiedTopology: true
});

// 定义 Calendar 模型
const CalendarSchema = new mongoose.Schema({
    user: { type: String, required: true },
    title: { type: String, required: true },
    allDay: { type: Boolean, default: false },
    end: { type: Date, required: true },
    start: { type: Date, required: true },
    update: { type: Date, default: Date.now },
    innerdate: { type: Date, default: Date.now }
});

const Calendar = mongoose.model('Calendar', CalendarSchema);

// 获取所有日程
app.get('/api/calendars', async (req, res) => {
    try {
        const calendars = await Calendar.find({ user: req.query.user });
        res.json(calendars);
    } catch (err) {
        res.status(500).send(err.message);
    }
});

// 添加新日程
app.post('/api/calendars', async (req, res) => {
    const calendar = new Calendar(req.body);
    try {
        await calendar.save();
        res.status(201).json(calendar);
    } catch (err) {
        res.status(400).send(err.message);
    }
});

// 更新日程
app.put('/api/calendars/:id', async (req, res) => {
    try {
        const calendar = await Calendar.findByIdAndUpdate(req.params.id, req.body, { new: true });
        if (!calendar) return res.status(404).send("No calendar found with this id");
        res.json(calendar);
    } catch (err) {
        res.status(400).send(err.message);
    }
});

// 删除日程
app.delete('/api/calendars/:id', async (req, res) => {
    try {
        const calendar = await Calendar.findByIdAndDelete(req.params.id);
        if (!calendar) return res.status(404).send("No calendar found with this id");
        res.send("Calendar deleted successfully");
    } catch (err) {
        res.status(400).send(err.message);
    }
});

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

总结

以上代码展示了如何使用 Node.js 和 Express.js 实现 FullCalendar 的后台实时交互。通过定义一个简单的 Calendar 模型，我们可以轻松地进行增删改查操作。客户端可以通过 AJAX 请求与这些 API 进行交互，从而实现实时的日程管理功能。

yibo5220 2楼

针对 Node.js 和 FullCalendar 实现后台实时交互，我们可以使用 Express 框架来处理 API 请求，并使用 MongoDB 作为数据库存储日程数据。下面是一个简单的示例，展示如何创建一个基本的日程管理应用。

1. 安装依赖

首先确保安装了必要的 Node.js 包：

npm install express mongoose body-parser cors

2. 创建数据库模型

创建一个 models 文件夹，并在其中创建一个 Calendar.js 文件定义数据模型：

const mongoose = require('mongoose');

const CalendarSchema = new mongoose.Schema({
    user: { type: String, required: true, unique: true },
    title: { type: String, required: true },
    allDay: { type: Boolean, default: false },
    start: { type: Date, required: true },
    end: { type: Date, required: true },
    update: { type: Date, default: Date.now },
    innerdate: { type: Date, default: Date.now }
});

module.exports = mongoose.model('Calendar', CalendarSchema);

3. 设置 Express 路由

创建一个 routes 文件夹，并在其中创建一个 calendars.js 文件，用于处理 API 路由：

const express = require('express');
const router = express.Router();
const Calendar = require('../models/Calendar');

router.get('/', async (req, res) => {
    const calendars = await Calendar.find({});
    res.json(calendars);
});

router.post('/', async (req, res) => {
    const calendar = new Calendar(req.body);
    await calendar.save();
    res.status(201).json(calendar);
});

router.put('/:id', async (req, res) => {
    const { id } = req.params;
    const updatedCalendar = await Calendar.findByIdAndUpdate(id, req.body, { new: true });
    res.json(updatedCalendar);
});

router.delete('/:id', async (req, res) => {
    const { id } = req.params;
    await Calendar.findByIdAndDelete(id);
    res.status(204).send();
});

module.exports = router;

4. 配置 Express 应用

在项目根目录下创建一个 server.js 文件：

const express = require('express');
const bodyParser = require('body-parser');
const cors = require('cors');
const mongoose = require('mongoose');
const calendarRoutes = require('./routes/calendars');

const app = express();

app.use(bodyParser.json());
app.use(cors());

mongoose.connect('mongodb://localhost:27017/fullcalendar', { useNewUrlParser: true, useUnifiedTopology: true });

app.use('/api/calendars', calendarRoutes);

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));

5. 配置 FullCalendar

最后，在客户端配置 FullCalendar 使用上述 API 路由来加载和更新日程：

<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.4.0/core.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.4.0/daygrid.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/4.4.0/interaction.min.js'></script>

<script>
document.addEventListener('DOMContentLoaded', function() {
    var calendarEl = document.getElementById('calendar');
    var calendar = new FullCalendar.Calendar(calendarEl, {
        plugins: ['dayGrid', 'interaction'],
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'dayGridMonth'
        },
        events: '/api/calendars',
        editable: true,
        droppable: true
    });
    calendar.render();
});
</script>

这样，我们就建立了一个基本的日程管理系统，能够通过 FullCalendar 显示并管理日程。

Nodejs fullcalendar 日程控件 后台实时交互实现 (数据表)