Django fullcalendar.js 日历事件 添加/删除/修改

最新推荐文章于 2024-05-13 09:54:26 发布
最新推荐文章于 2024-05-13 09:54:26 发布
阅读量3.3k 收藏 15
点赞数 7
分类专栏： python全栈开发 文章标签：  fullcalendar js bootstrap-datetimepicker Django Json
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012836361/article/details/96427373
版权

Django  fullcalendar.js 日历事件 添加/删除/修改

########################################

@fullcalendar 官网

@fullcalendar 中文文档

########################################

HTML 效果图

/GotIT/user/templates/index.html    Index

 

/GotIT/user/templates/index.html    Add/Del/Upd Event

 

/GotIT/user/templates/index.html    Event time picker

 

/GotIT/user/templates/index.html    Event Add success
/GotIT/user/templates/index.html    Event Del success

 

{% load staticfiles %}
{% load static %}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">
<head>
    <meta charset="UTF-8">
    <title>User Indext</title>
    <link rel="shortcut  icon" type="image/x-icon" href="{% static 'icon/favicon.ico' %}" media="screen"/>
    <link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/bootstrap-datetimepicker.min.css' %}">
    <link rel="stylesheet" href="{% static 'icon/font/css/open-iconic-bootstrap.min.css' %}">
    <link rel="stylesheet" href="{% static 'css/fullcalendar.min.css' %}"/>
    <link rel="stylesheet" href="{% static 'css/fullcalendar.print.min.css' %}" media='print'/>
    <script type="text/javascript" src="{% static 'js/moment.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/popper.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/fullcalendar.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap-datetimepicker.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'js/bootstrap.min.js' %}"></script>
</head>
<body>
<div class="myPanel">
    <div id='calendar'></div>
</div>

<!-- Modal -->
<div class="modal fade" id="selectModal" tabindex="-1" role="dialog" aria-labelledby="selectLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="selectLabel">{{username}}的日程安排</h5>
        <input id="eID" class="close" type="button" value="ID"/>
      </div>
      <div class="modal-body">
          {% csrf_token %}
          <input id="eTitle" class="form-control" type="text" placeholder="Title"/>
          <div class="input-append date form_datetime1" data-date="{{nowtime}}" data-date-format="yyyy-mm-dd HH:ii:ss">
              <input id="eStart" class="form-control" type="text" align="left" readonly/>
              <span class="add-on"><i class="icon-remove"></i></span>
              <span class="add-on"><i class="icon-th"></i></span>
          </div>
          <div class="input-append date form_datetime2" data-date="{{nowtime}}" data-date-format="yyyy-mm-dd HH:ii:ss">
              <input id="eEnd" class="form-control" type="text" align="left" readonly/>
              <span class="add-on"><i class="icon-remove"></i></span>
              <span class="add-on"><i class="icon-th"></i></span>
          </div>
          <select id="eCss" class="form-control" onchange="setColor(this)">
              <option class="border-primary bg-white text-primary" value="border-primary bg-white text-primary">蓝字-白底</option>
              <option class="border-success bg-white text-success" value="border-success bg-white text-success">绿字-白底</option>
              <option class="border-danger bg-white text-danger" value="border-danger bg-white text-danger">红字-白底</option>
              <option class="border-warning bg-white text-warning" value="border-warning bg-white text-warning">黄-白底</option>
              <option class="border-info bg-white text-info" value="border-info bg-white text-info">青字-白底</option>
              <option class="bg-primary text-dark" value="bg-primary text-dark">黑字-蓝底</option>
              <option class="bg-secondary text-dark" value="bg-secondary text-dark">黑字-灰底</option>
              <option class="bg-success text-dark" value="bg-success text-dark">黑字-绿底</option>
              <option class="bg-danger text-dark" value="bg-danger text-dark">黑字-红底</option>
              <option class="bg-warning text-dark" value="bg-warning text-dark">黑字-黄底</option>
              <option class="bg-info text-dark" value="bg-info text-dark">黑字-青底</option>
              <option class="bg-primary text-danger" value="bg-primary text-danger">红字-蓝底</option>
              <option class="bg-primary text-warning" value="bg-primary text-warning">黄字-蓝底</option>
              <option class="bg-primary text-info" value="bg-primary text-info">青字-蓝底</option>
          </select>
      </div>
      <div class="modal-footer">
        <button id="delBtn" type="button" class="btn btn-danger" onclick="delEvent()">删除(Delete)</button>
        <button id="addBtn" type="button" class="btn btn-primary" onclick="updateEvent()">更新(Update)</button>
        <button id="addBtn" type="button" class="btn btn-primary" onclick="addEvent()">添加(Add)</button>
        <button id="closeBtn" type="button" class="btn btn-secondary" data-dismiss="modal">退出(Exist)</button>
      </div>
    </div>
  </div>
</div>

</div>
<style>
.myPanel{
  width:100%;
  height:100%;
}
#calendar {
  width:100%;
  height:100%;
  float:center;
}
</style>
<script>
//CSRF Setup for Ajax
var csrftoken = jQuery("[name=csrfmiddlewaretoken]").val();
function csrfSafeMethod(method) {
    // these HTTP methods do not require CSRF protection
    return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
//设定Ajax发送前头部加入csrf键值
$.ajaxSetup({
    beforeSend: function(xhr, settings) {
        if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
            xhr.setRequestHeader("X-CSRFToken", csrftoken);
        }
    }
});

//页面DOM加载完成时执行一下脚本
$(document).ready(function() {
    console.log('loading.....');
    //添加第一个bootstrap的日期时间输入插件datetimepicker
    $('.form_datetime1').datetimepicker({
      startDate: "{{ nowtime }}",
      weekStart: 1,
      minuteStep: 1,
      format: "yyyy-mm-dd HH:ii",
      showMeridian: true,
      autoclose: true,
      todayHighlight:true,
      todayBtn: true,
      keyboardNavigation:true
    });

    $('.form_datetime2').datetimepicker({
      startDate: "{{ nowtime }}",
      weekStart: 1,
      minuteStep: 1,
      format: "yyyy-mm-dd HH:ii",
      showMeridian: true,
      autoclose: true,
      todayHighlight:true,
      todayBtn: true,
      keyboardNavigation: true
    });
    //添加日历界面，设定fullcallendar参数
    $('#calendar').fullCalendar({
      height: 650,
      handleWindowResize: true,
      defaultView: 'month',
      firstDay:1,
      fixedWeekCount: true,
      navLinks: true,
      weekMode: 'liquid',
      weekNumbers: true,
      weekNumbersWithinDays: true,
      weekNumberCalculation: 'ISO',
      businessHours: true,
      defaultEventMinutes: 60,
      selectable: true,
      selectHelper: true,
      editable: true,
      displayEventTime:true,
      displayEventEnd:true,

      slotDuration: '00:15:00',
      scrollTime: '6:00:00',
      eventLimit: true,
      views: {
      },

      customButtons: {
        addBtn: {
          text: '+',
          click: function(){
            $('#selectModal').modal('toggle');
          },
        }
      },

      header: {
        left: 'prevYear,prev',
        center: 'title',
        right: 'next,nextYear today,agendaWeek,month,agenda,listMonth,addBtn'
      },
      //添加日历初始化event的动态数据源
      eventSources: [
        {
          events: function(tart, end, timezone, callback){
            $.ajax({
              url: "{% url 'ajax_get_event' %}", //代入urls.py中路由器条目name="ajax_get_event"的url
              type: 'get',
              success : function(data){
                var events = data.events
                console.log(events);
                callback(events);
              }
            });
          },
          editable: false,
        },
        //自定义的静态event数据
        {
          events:[
            {
              title: 'other resource',
              start: '2018-12-18',
              className: 'text-primary bg-white'
            }
          ],
          editable: true
        }
      ],

      eventClick: function(event, view){
        if(event.start!=null){
          $('#eStart').val(event.start._i);
        }else{
          $('#eStart').val("");
        }
        if(event.end!=null){
          $('#eEnd').val(event.end._i);
        }else{
          $('#eEnd').val("");
        }
        $('#eID').val(event.id);
        $('#eTitle').val(event.title);
        $('#eCss').val(event.css);
        $('#selectModal').modal('toggle');
      },

      eventDrop: function(event, delta, revertFunc) {
        event.start = delta;
        event.end = delta;
        $('#calendar').fullCalendar( 'renderEvent', event);
      }
    });

  });
//添加event
function addEvent(){
    console.log('adding.........')
    var title = $(eTitle).val();
    var start = $(eStart).val();
    var end = $(eEnd).val();
    var css = $(eCss).val();
    console.log(css);
    $.ajax({
        url: "{% url 'ajax_add_event' %}",
        type: 'post',
        data: {
          'title': title,
          'start': start,
          'end': end,
          'css': css,
        },
        success : function(data) {
            console.log(data);
            $('#calendar').fullCalendar( 'refetchEvents');
            $('#eTitle').val("");
            $('#eCss').val("")
        },
        error : function(data) {
            console.log(data);
        },
    });
}
//删除event
function delEvent(){
    console.log('del.........')
    var get_id = $('#eID').val();
    console.log(get_id);
    $.ajax({
        url: "{% url 'ajax_del_event' %}",
        type: 'post',
        data: {
          'id': get_id,
        },
        success : function(data) {
            console.log(data);
            $('#calendar').fullCalendar( 'refetchEvents');
            $('#selectModal').modal('toggle');
            $('#eID').val("");
            $('#eTitle').val("");
            $(eStart).val("");
            $(eEnd).val("");
            $('#eCss').val("");
        },
        error : function(data) {
            console.log(data);
        },
    });
}
//更新event
function updateEvent(){
    console.log('update.........')
    var id = $('#eID').val();
    var title = $(eTitle).val();
    var start = $(eStart).val();
    var end = $(eEnd).val();
    var css = $(eCss).val();
    $.ajax({
        url: "{% url 'ajax_upd_event' %}",
        type: 'post',
        data: {
          'id': id,
          'title': title,
          'start': start,
          'end': end,
          'css': css,
        },
        success : function(data) {
            console.log(data);
            $('#calendar').fullCalendar( 'refetchEvents');
            $('#selectModal').modal('hide');
            $(eStart).val("");
            $(eEnd).val("");
            $('#eID').val("");
            $('#eTitle').val("");
            $('#eCss').val("");
        },
        error : function(data) {
            console.log(data);
        },
    });
}

//获取当前月份
function getMonth(){
 $.ajax({
            url: "{% url 'ajax_month' %}",
            type: 'get',
            success : function(data) {
                console.log(data.month);
                $("#myMonth").html(data.month);
            },
            error : function(data) {
                console.log(data);
            },
        });
}

function setColor(self){
    self.style.className=self.value;
}
</script>
<body>
</html>

 

GTaylor
关注
  • 7
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
JS日程管理插件FullCalendar简单实例
12-11
在线演示              源码下载 HTML 首先第一步就是在需要调用FullCalendar日程插件的页面中载入必要的javascript和css文件，包括jQuery库文件，FullCalendar插件以及FullCalendar样式表。如果您还想要拖动日程的功能，那么还需要加入jQuery ui插件。 <link rel="stylesheet" type="text/css" href="css/fullcalendar.css" rel="external nofollow" > [removed][removed]
JS插件fullcalendar教程.rar
10-23
JS插件fullcalendar教程 存放着使用的相关文档和例子，自己导入到相应的目录结构，可以直接使用，已测试成功。
探索与创新：Vue-fullcalendar——一款基于Vue.js的全功能日历组件
最新发布
gitblog_00034的博客
05-13 438
探索与创新：Vue-fullcalendar——一款基于Vue.js的全功能日历组件 项目地址:https://gitcode.com/Wanderxx/vue-fullcalendar 在我们的日常开发中，一个直观且功能强大的日历组件往往能极大地提升用户体验。今天，我们向您推荐一个专为Vue.js框架设计的开源项目——Vue-fullcalendar。这个项目不仅实现了完整的月份视图，还具备了丰...
原生JS实现FullCalendar
一条会流泪的鱼
06-11 1349
最近在做项目时，得到了一个需求就是类似于FullCalendar的课程日历，找了很多的相关文档，都是通过FullCalendar插件实现的，但是一系列的方法样式以及展示效果都不太符合开发需求，最开始尝试着去使用这个插件，但是最后得到效果后还是觉得局限性太大了，在FullCalendar源码中，一些方法层层调用，自己被搞的晕头转向，于是果断放弃了这个插件的使用来实现项目的需求。（因为你说服不了产品去该需求，哈哈哈） 1.FullCalendar介绍 此插件功能颇为丰富，但是对于阅读源码有难度的我来说，显得很
FullCalendar说明文档
yuan_jie
11-27 5288
FullCalendar提供了丰富的属性设置和方法调用，开发者可以根据FullCalendar提供的API快速完成一个日历日程的开发，本文将FullCalendar的常用属性和方法、回调函数等整理成中文文档，方便参阅。当前版本1.6.4。 普通显示设置 属性 描述 默认值 header 设置日历头部信息。 如果设置为false，则不显示
JS插件：fullCalendar图解
weixin_30478923的博客
12-29 428
1.首先看下效果： 官网下载链接 https://fullcalendar.io/download .官方效果图：https://fullcalendar.io/ 2.准备工作，引入对应的 css和 js文件 calendar/theme.css fullcalendar.css fullcalendar.print.css https://ajax.googleapis....
django+ajax+fullcalendar 中文版demo
Donmino的博客
03-21 312
django+ajax+fullcalendar 中文版demo
linkphoto:Django + 全日历
06-01
记录每天的每一次训练，使用FullCalendar + Django，数据库为MySQL。 你可以看到它： 访客登录： user: guest password: xdmg,NGymG3ut%Q6 创建数据库 创建数据库 app_linkphoto DEFAULT CHARACTER SET gbk ...
Vacations-app:保留公司假期的Django应用程序。 主要部分基于Fullcalendar框架
05-24
2. Fullcalendar框架：Fullcalendar是一个开源的JavaScript库，专门用于日历事件展示。在Vacations-app中，它被用作主要的前端组件，用于展示和管理公司的假期计划。Fullcalendar提供了丰富的交互功能，如拖放操作、...
django-scheduler_python_django_
10-01
4. 多用户协作：允许多个用户共享日历，同时进行事件的添加、修改和删除，实现团队协作。 5. 视图展示：提供多种视图，如日视图、周视图、月视图和列表视图，便于用户查看和管理事件。 三、安装与配置 要使用Django...
FullCalendar
04-16
5. **监听事件**：通过FullCalendar的事件API，可以监听用户的交互行为，例如添加、修改、删除事件等。 **三、源码分析** FullCalendar的源码是开源的，开发者可以深入研究其内部实现，了解如何处理时间计算、视图...
fullcalendar.min.js
06-22
fullcalendar.min.js
fullcalendar的js和css文件
10-11
fullcalendar的js和css文件，经测试，可以正常使用，并且是中文
django-spms:django-spms是一个基于Django + AdminLTE的框架，集成了RBAC权限管理，账户管理， JWT认证， 多站点统一登录CAS，基于DRF的API等模块，并集成第三方Celery，pycharts， ckeditor，mdeditor模块，拥有清晰良好的代码结构，有助于快速的开启一个新的项目
05-14
django-spms django-spms是一个基于Django + AdminLTE的框架，集成了RBAC权限管理，账户管理， JWT认证， 多站点统一登录CAS，基于DRF的API等模块，并集成第三方Celery，pycharts， ckeditor，mdeditor模块，拥有清晰良好的代码结构，有助于快速的开启一个新的项目。 一、安装 只支持Django 2.2.x, Python 3.6 部署请参考 INSTALL 实际示例截图见：demo目录 二、授权 BSD 3-Clause License 三、作者 spunkmars（spunkmars#gmail.com) 四、项目目录结构 src/ ├── appxs # 子应用目录 │   ├── account # 账户、权限子应用 │   │   ├── fixtures # 测试数据集 │   │   ├── forms
js 日程插件库 -- fullCalender
WaterSprite_ct的博客
11-16 4020
jQuery 日程插件库 -- fullCalendar
关于fullCalendar的一些简单介绍
黄书胜的博客
03-04 2050
最近参与一个任务分配的项目，开发其中的日历模块，选用了fullCalendar这个日历控件，在此记录一下在项目中的用到该控件的地方，方便以后使用时查阅。 一、下载地址 https://fullcalendar.io/download，下载解压后复制进项目中直接就可使用。 二、fullCalendar的使用 由于我使用的前端框架时easyui，所以每个前端页面包含了一个js和一个jsp文件。...
html日历的制作
weixin_45748671的博客
12-18 2463
需前往网站下载FullCalendar.js套件，下载后将fullcalendar文件夹及lib文件夹里的文件复制到html文件所在的文件夹即可。 <! DOCTYPE html> <html> <head> <link href='fullcalendar/fullcalendar/fullcalendar.css' rel='stylesheet'...
fullcalendar日历控件知识点集合
热门推荐
FrancisLaw的学园
07-12 6万+
1、基本语法：        首先，fullcalendar和JQUERY一样，以面向对象的方式来组织代码。当然，这里的面向对象仅仅是指可以把整个fullcalendar理解为一个类，这个类里包括有很多的属性、方法、委托(函数回调)作为成员变量。通过为这些成员变量赋值，即可实例化出一个符合自己需求的fullcalendar实例出来，即最终在浏览器里渲染出的日历。换句话说，我们所做的绝大多数工作就
一个强大的js日历控件 FullCalendar 外加一堆可以直接运行的测试代码拿走不谢
末贵的CSDN个人博客
03-18 2219
一个强大的JavaScript Calendar（FullCalendar）-日历控件，大部分功能免费，有少部分高级功能收费
Django settings for wxRent project. Generated by 'django-admin startproject' using Django 1.11.20. For more information on this file, see https://docs.djangoproject.com/en/1.11/topics/settings/ For the full list of settings and their values, see https://docs.djangoproject.com/en/1.11/ref/settings/ """
06-02
这段是Django框架中的设置文件，通常称为"settings.py"。它包含了Django应用程序的所有配置信息，如数据库、静态文件路径、模板路径、中间件...您可以在这个文件中添加、修改或删除配置信息，以满足您的应用程序需求。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值