Nodejs fullcalendar 日程控件后台实时交互实现 (前端代码)

FullCalendar v1.6.4 采用这个版本，官网下载地址及API http://arshaw.com/fullcalendar/ 废话不多说,本人感觉前端效果很牛逼,所以用nodejs+mongodb保存数据。前端: 加载及监听事件 $(document).ready(function() {

  var date = new Date();
  var d = date.getDate();
  var m = date.getMonth();
  var y = date.getFullYear();
var calendar = $(’#calendar’).fullCalendar({
header: {
left: ‘prev,next today’,
center: ‘title’,
right: ‘month,agendaWeek,agendaDay’
},
selectable: true,
selectHelper: true,
select: function(start, end, allDay) {
var title = prompt(‘Event Title:’);
if (title) {
var params = {title: title,
start: start,
end: end,
allDay: allDay
};
$.ajax({
url:"/insertCalendar",
type:“post”,
data:params,
dataType: ‘json’,
success: function(res){
if(res.status == 0){
$("#success1").html("<strong>添加成功!</strong>");
$("#success1").show();
setTimeout(function(){$("#success1").hide();},3000);
                    }else{
                        $("#err1").html("&lt;strong&gt;添加失败!&lt;/strong&gt;");
                        $("#err1").show();
                        setTimeout(function(){$("#err1").hide();},3000);
                    }
                    $('#calendar').fullCalendar('refetchEvents');
                },
                err:function(res){
                    $("#err1").html("&lt;strong&gt;操作有误!&lt;/strong&gt;");
                    $("#err1").show();
                    setTimeout(function(){$("#err1").hide();},3000);
                }
          });//insert
      }
      
  },
  editable: true,
  events: function(start,end,callback){
      var params = {};
      $.ajax({
              url:"/findCalendar",
              type:"post",
              data:params,
                dataType: 'json',
                success: function(res){
                    var events =[];
                    if(res.status==0){                   
                        for(i in res.events){
                            if(res.events[i].allDay == false){
                                events.push({ 
                                    id:res.events[i]._id,
                                    title:res.events[i].title,
                                    start:new Date(res.events[i].y_start,res.events[i].m_start,res.events[i].d_start,res.events[i].hh_start,res.events[i].mm_start),
                                    end:new Date(res.events[i].y_end,res.events[i].m_end,res.events[i].d_end,res.events[i].hh_end,res.events[i].mm_end),
                                    allDay:false
                                });
                            }else{
                                events.push({ 
                                    id:res.events[i]._id,
                                    title:res.events[i].title,
                                    start:new Date(res.events[i].y_start,res.events[i].m_start,res.events[i].d_start),
                                    end:new Date(res.events[i].y_end,res.events[i].m_end,res.events[i].d_end),
                                    allDay:true
                                });
                            }
                        }
                        try{    
                            //$("#success1").html(events[0].start+"*_*"+events[0].end);
                            //$("#success1").show();
                            callback(events);
                        }catch(e){
                            hc("div.fc-event");
                            fc("span.fc-button");
                        } finally {
                  　　    hc("div.fc-event");
                          fc("span.fc-button");
                  　　}
                        
                    }

                      }
            });
        } ,
eventMouseover: function(event, jsEvent, view){ //监听不止一个元素！.fc-event及初始加载两个子元素均可能
    
    var $h = $(jsEvent.target);
    
    $h.attr("_id",event.id);
    
},
//eventDragStart  eventDragStop eventDrop
eventDrop: function(event,dayDelta,minuteDelta,allDay,revertFunc) {
    
    if(allDay){
        update_date(event,dayDelta);
    }else{
        
        updatetime_date(event,dayDelta,minuteDelta);
    }
},

eventResize : function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
    //alert(dayDelta);

    updatetime(event,dayDelta,minuteDelta);
}
});
});

对应的前端特效及处理ajax函数: $(function(){ /var d = new Date(); d.setHours(d.getHours() + 2); $(’#calendar’).fullCalendar( ‘addEventSource’, [{title:“add”,start:new Date(),end:d}] )/ });

var hc = function(t){ $(t).each(function(){ var $this = $(this); if(!$this.data(“hc”)){ $this.css(“z-index”,-1); var width = $this.width(),height = $this.height();

        var app = "<div class='xxcc alert alert-info' style='z-index:999;display:none;position:absolute;left:-1px;top:-37px;padding:5px;margin:0;width:"+80+"px;height:25px;'><div style='width:80px;position:relative;margin: 0 auto;'><div class='fl'><a class='btn btn-small btn-success' onclick='update(this,event);'><i class='icon-edit'></i></a></div><div class='fl' style='margin-left:15px;'><a class='btn btn-small btn-warning' onclick='removeCalendar(this,event);'><i class='icon-remove '></i></a></div></div></div>";
        //(width-10)
        $this.append(app);
        $this.data("hc","hc");
    }
    $this.hover(function(e){
        $this.css("z-index",1);
        $this.find(".xxcc").show();
},function(e){
    $this.css("z-index",-1);
    $this.find(".xxcc").hide();
});
})

};

前端监听实现方式很多，采用插件几个监听，由于不会怎么上传图片，不会图片功能，等到会了这个功能附上图片。

yuanlaile 1楼

根据你提供的标题和内容，以下是关于Node.js和FullCalendar的日程控件后台实时交互的前端代码。这个示例展示了如何使用FullCalendar与Node.js后端进行交互，包括日程的创建、更新、删除等操作。

前端代码

首先，确保引入了FullCalendar库：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>

接下来是初始化FullCalendar和处理日程事件的JavaScript代码：

$(document).ready(function() {
    var date = new Date();
    var d = date.getDate();
    var m = date.getMonth();
    var y = date.getFullYear();

    var calendar = $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        selectable: true,
        selectHelper: true,
        select: function(start, end, allDay) {
            var title = prompt('Event Title:');
            if (title) {
                var params = { title: title, start: start, end: end, allDay: allDay };
                $.ajax({
                    url: "/insertCalendar",
                    type: "POST",
                    data: params,
                    dataType: 'json',
                    success: function(res) {
                        if (res.status == 0) {
                            $("#success1").html("<strong>添加成功!</strong>");
                            $("#success1").show();
                            setTimeout(function() { $("#success1").hide(); }, 3000);
                        } else {
                            $("#err1").html("<strong>添加失败!</strong>");
                            $("#err1").show();
                            setTimeout(function() { $("#err1").hide(); }, 3000);
                        }
                        $('#calendar').fullCalendar('refetchEvents');
                    },
                    error: function(res) {
                        $("#err1").html("<strong>操作有误!</strong>");
                        $("#err1").show();
                        setTimeout(function() { $("#err1").hide(); }, 3000);
                    }
                });
            }
            calendar.fullCalendar('unselect');
        },
        editable: true,
        events: function(start, end, timezone, callback) {
            var params = {};
            $.ajax({
                url: "/findCalendar",
                type: "POST",
                data: params,
                dataType: 'json',
                success: function(res) {
                    var events = [];
                    if (res.status == 0) {
                        for (var i in res.events) {
                            var event = res.events[i];
                            events.push({
                                id: event._id,
                                title: event.title,
                                start: new Date(event.y_start, event.m_start, event.d_start, event.hh_start, event.mm_start),
                                end: new Date(event.y_end, event.m_end, event.d_end, event.hh_end, event.mm_end),
                                allDay: event.allDay
                            });
                        }
                        callback(events);
                    }
                }
            });
        },
        eventMouseover: function(event, jsEvent, view) {
            var $h = $(jsEvent.target);
            $h.attr("_id", event.id);
        },
        eventDrop: function(event, dayDelta, minuteDelta, allDay, revertFunc) {
            if (allDay) {
                update_date(event, dayDelta);
            } else {
                updatetime_date(event, dayDelta, minuteDelta);
            }
        },
        eventResize: function(event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
            updatetime(event, dayDelta, minuteDelta);
        }
    });

    // 更新日程
    function update_calendar(event, title) {
        var params = { _id: event.id, title: title };
        $.ajax({
            url: "/updateCalendar",
            type: "POST",
            data: params,
            dataType: 'json',
            success: function(res) {
                $("#success1").html("<strong>修改成功</strong>");
                $("#success1").show();
                setTimeout(function() { $("#success1").hide(); }, 3000);
                $('#calendar').fullCalendar('refetchEvents');
            }
        });
    }

    // 删除日程
    function remove_calendar(event) {
        var params = { _id: event.id };
        $.ajax({
            url: "/removeCalendar",
            type: "POST",
            data: params,
            dataType: 'json',
            success: function(res) {
                $("#success1").html("<strong>删除成功</strong>");
                $("#success1").show();
                setTimeout(function() { $("#success1").hide(); }, 3000);
                $('#calendar').fullCalendar('refetchEvents');
            }
        });
    }
});

解释

初始化：使用fullCalendar方法初始化日历，并设置头部、可选择性等属性。
事件监听：
- select：当用户在日历中选择一个时间段时触发，弹出提示框让用户输入日程标题，并通过AJAX将新日程发送到后端。
- events：从后端获取所有日程信息并显示在日历上。
- eventMouseover：鼠标悬停在日程上时添加自定义按钮。
- eventDrop 和 eventResize：当用户拖动或调整日程大小时，更新日程信息并发送到后端。
更新和删除功能：定义了update_calendar和remove_calendar函数，用于更新和删除日程信息。

以上就是基于Node.js和FullCalendar的日程控件的前端代码实现。

htzhanglong 2楼

根据提供的前端代码，这里提供一个简单的 Node.js 后端实现示例，用于处理 FullCalendar 的 CRUD 操作。我们将使用 Express 和 MongoDB 来实现基本的数据存储和交互。

安装必要的依赖

首先，确保你已经安装了以下 Node.js 模块：

npm install express mongoose body-parser

创建 MongoDB 模型

创建一个名为 models/Event.js 的文件，定义事件模型：

const mongoose = require('mongoose');

const EventSchema = new mongoose.Schema({
  title: String,
  start: Date,
  end: Date,
  allDay: Boolean
});

module.exports = mongoose.model('Event', EventSchema);

创建 API 路由

创建一个名为 routes/events.js 的文件，定义处理 FullCalendar 请求的路由：

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

// 插入新事件
router.post('/insertCalendar', async (req, res) => {
  const event = new Event(req.body);
  try {
    await event.save();
    res.json({ status: 0, message: "添加成功" });
  } catch (error) {
    res.json({ status: 1, message: "添加失败" });
  }
});

// 获取所有事件
router.post('/findCalendar', async (req, res) => {
  try {
    const events = await Event.find({});
    res.json({ status: 0, events });
  } catch (error) {
    res.json({ status: 1, message: "查询失败" });
  }
});

// 更新事件
router.post('/updateCalendar', async (req, res) => {
  try {
    await Event.findByIdAndUpdate(req.body._id, req.body);
    res.json({ status: 0, message: "更新成功" });
  } catch (error) {
    res.json({ status: 1, message: "更新失败" });
  }
});

// 删除事件
router.post('/removeCalendar', async (req, res) => {
  try {
    await Event.findByIdAndDelete(req.body._id);
    res.json({ status: 0, message: "删除成功" });
  } catch (error) {
    res.json({ status: 1, message: "删除失败" });
  }
});

module.exports = router;

配置 Express 应用

在你的主应用文件中（如 app.js 或 index.js），引入并使用上述定义的路由：

const express = require('express');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const eventRoutes = require('./routes/events');

const app = express();

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

app.use(bodyParser.json());

app.use('/api', eventRoutes);

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

以上就是基于 Node.js 和 MongoDB 实现 FullCalendar 后端的基本示例。你可以根据实际需求进一步扩展和优化。