fullcalendar的使用完整前后端案例

这里给出一个基于Vue.js和Node.js的前后端使用fullcalendar的案例。

前端：

1. 安装fullcalendar和相关依赖

npm install --save @fullcalendar/core @fullcalendar/daygrid @fullcalendar/timegrid @fullcalendar/interaction

2. 在组件中引入fullcalendar并初始化

<template>
  <div>
    <FullCalendar :plugins="calendarPlugins" :events="calendarEvents" />
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      calendarEvents: [
        {
          title: 'Event 1',
          start: '2021-01-01'
        },
        {
          title: 'Event 2',
          start: '2021-01-03',
          end: '2021-01-05'
        }
      ]
    }
  }
}
</script>

后端：

1. 安装相关依赖

npm install --save express body-parser mysql

2. 创建数据库并创建事件表

CREATE DATABASE calendar;
USE calendar;

CREATE TABLE events (
  id INT(11) NOT NULL AUTO_INCREMENT,
  title VARCHAR(255) NOT NULL,
  start DATETIME NOT NULL,
  end DATETIME,
  PRIMARY KEY (id)
);

3. 创建Node.js服务

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

const app = express();
const port = 3000;

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: '',
  database: 'calendar'
});

connection.connect((err) => {
  if (err) {
    console.error('error connecting: ' + err.stack);
    return;
  }

  console.log('connected as id ' + connection.threadId);
});

app.get('/events', (req, res) => {
  connection.query('SELECT * FROM events', (error, results) => {
    if (error) {
      console.error(error);
      return res.status(500).json({ message: 'Error fetching events' });
    }

    res.json(results);
  });
});

app.post('/events', (req, res) => {
  const { title, start, end } = req.body;

  connection.query('INSERT INTO events (title, start, end) VALUES (?, ?, ?)', [title, start, end], (error, results) => {
    if (error) {
      console.error(error);
      return res.status(500).json({ message: 'Error creating event' });
    }

    res.json({ id: results.insertId });
  });
});

app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`);
});

4. 在前端中使用axios和fullcalendar进行数据交互

<template>
  <div>
    <FullCalendar :plugins="calendarPlugins" :events="calendarEvents" @eventClick="handleEventClick" />
    <div v-if="showEventForm">
      <form @submit.prevent="handleEventSubmit">
        <div>
          <label for="title">Title</label>
          <input type="text" id="title" v-model="eventForm.title" />
        </div>
        <div>
          <label for="start">Start</label>
          <input type="datetime-local" id="start" v-model="eventForm.start" />
        </div>
        <div>
          <label for="end">End</label>
          <input type="datetime-local" id="end" v-model="eventForm.end" />
        </div>
        <button type="submit">Create Event</button>
      </form>
    </div>
  </div>
</template>

<script>
import FullCalendar from '@fullcalendar/vue'
import dayGridPlugin from '@fullcalendar/daygrid'
import timeGridPlugin from '@fullcalendar/timegrid'
import interactionPlugin from '@fullcalendar/interaction'
import axios from 'axios'

export default {
  components: {
    FullCalendar
  },
  data() {
    return {
      calendarPlugins: [dayGridPlugin, timeGridPlugin, interactionPlugin],
      calendarEvents: [],
      showEventForm: false,
      eventForm: {
        title: '',
        start: '',
        end: ''
      }
    }
  },
  created() {
    this.fetchEvents();
  },
  methods: {
    fetchEvents() {
      axios.get('/events')
        .then(response => {
          this.calendarEvents = response.data.map(event => ({
            title: event.title,
            start: event.start,
            end: event.end
          }));
        })
        .catch(error => {
          console.error(error);
        });
    },
    handleEventClick(info) {
      this.showEventForm = true;
      this.eventForm.title = info.event.title;
      this.eventForm.start = info.event.startStr;
      this.eventForm.end = info.event.endStr;
    },
    handleEventSubmit() {
      axios.post('/events', this.eventForm)
        .then(response => {
          this.showEventForm = false;
          this.eventForm = {
            title: '',
            start: '',
            end: ''
          };
          this.calendarEvents.push({
            title: this.eventForm.title,
            start: this.eventForm.start,
            end: this.eventForm.end
          });
        })
        .catch(error => {
          console.error(error);
        });
    }
  }
}
</script>

这就是一个基于Vue.js和Node.js的前后端使用fullcalendar的完整案例。