django+ajax+fullcalendar 中文版demo

海海海海海海海海海海海海海海海海海海

已于 2024-03-21 10:45:34 修改

阅读量318

点赞数 3

文章标签： python 开发语言

于 2024-03-21 10:42:00 首次发布

本文链接：https://blog.csdn.net/Donmino/article/details/136901269

版权

效果图

fullcalendar/myapp/views.py

from django.shortcuts import render
from django.http import JsonResponse
from .models import Events


# Create your views here.
def index(request):
    all_events = Events.objects.all()
    context = {
        "events": all_events,
    }
    return render(request, 'index.html', context)


def all_events(request):
    all_events = Events.objects.all()
    out = []
    for event in all_events:
        out.append({
            'title': event.name,
            'id': event.id,
            'start': event.start.strftime("%m/%d/%Y, %H:%M:%S"),
            'end': event.end.strftime("%m/%d/%Y, %H:%M:%S"),
        })

    return JsonResponse(out, safe=False)


def add_event(request):

    start = request.GET.get("start", None)
    end = request.GET.get("end", None)
    title = request.GET.get("title", None)
    event = Events(name=str(title), start=start, end=end)
    event.save()
    data = {}
    return JsonResponse(data)


def update(request):
    start = request.GET.get("start", None)
    end = request.GET.get("end", None)
    title = request.GET.get("title", None)
    id = request.GET.get("id", None)
    event = Events.objects.get(id=id)
    event.start = start
    event.end = end
    event.name = title
    event.save()
    data = {}
    return JsonResponse(data)


def remove(request):
    id = request.GET.get("id", None)
    event = Events.objects.get(id=id)
    event.delete()
    data = {}
    # return JsonResponse(data, status=403)
    return JsonResponse(data)

fullcalendar/fullcalendar/urls.py

from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', views.index, name='index'),
    path('all_events/', views.all_events, name='all_events'),
    path('add_event/', views.add_event, name='add_event'),
    path('update/', views.update, name='update'),
    path('remove/', views.remove, name='remove'),
]

fullcalendar/fullcalendar/settings.py

...
INSTALLED_APPS = [
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'myapp',
]
...
DATABASES = {
    'default': {
        'ENGINE': 'django.db.backends.mysql',
        'NAME': 'django',
        'USER': 'root',
        'PASSWORD': '',
        'HOST': 'localhost',
        'PORT': '3306'
    }
}

fullcalendar/fullcalendar/__init__.py

import pymysql

pymysql.install_as_MySQLdb()

fullcalendar/myapp/models.py

# Create your models here.
from django.db import models


# Create your models here.
class Events(models.Model):
    id = models.AutoField(primary_key=True)
    name = models.CharField(max_length=255, null=True, blank=True)
    start = models.DateTimeField(null=True, blank=True)
    end = models.DateTimeField(null=True, blank=True)

    class Meta:
        db_table = "tblevents"

fullcalendar/myapp/templates/base.html

<!DOCTYPE html>
<html>
<head>
    <title>Laravel 9 Ajax FullCalender CRUD (Create, Read, Update and Delete)</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.css" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fullcalendar/3.9.0/fullcalendar.js"></script>
    <script src='https://fullcalendar.io/js/fullcalendar-3.9.0/locale/zh-cn.js'></script>

</head>
<body>
<div class="container">
 <div class="row">
    <h4>Python Django Ajax FullCalender CRUD (Create, Read, Update and Delete)</h4>
    {% block content %}{% endblock %}
 </div>
</div>
<script>

   $(document).ready(function () {
       var calendar = $('#calendar').fullCalendar({
           header: {
               left: 'prev,next today',
               center: 'title',
               right: 'month,agendaWeek,agendaDay'
           },
           events: '/all_events',

           selectable: true,
           selectHelper: true,
           editable: true,
           eventLimit: true,
           locale: 'zh-cn',
  eventRender: function(event, element) {
    var startTime = event.start.format('H:mm');
    var endTime = event.end ? event.end.format('H:mm') : startTime; // 如果没有结束时间，使用开始时间

    element.find('.fc-time').html(startTime + ' - ' + endTime); // 修改这一行
    element.find('.fc-title').html(event.title); // 修改这一行
  },
           select: function (start, end, allDay) {
               var title = prompt("Enter Event Title");
               if (title) {
                   var start = $.fullCalendar.formatDate(start, "Y-MM-DD HH:mm:ss");
                   var end = $.fullCalendar.formatDate(end, "Y-MM-DD HH:mm:ss");
                   $.ajax({
                       type: "GET",
                       url: '/add_event',
                       data: {'title': title, 'start': start, 'end': end},
                       dataType: "json",
                       success: function (data) {
                           calendar.fullCalendar('refetchEvents');
                           alert("Added Successfully");
                       },
                       error: function (data) {
                           alert('There is a problem!!!');
                       }
                   });
               }
           },
           eventResize: function (event) {
               var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
               var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
               var title = event.title;
               var id = event.id;
               $.ajax({
                   type: "GET",
                   url: '/update',
                   data: {'title': title, 'start': start, 'end': end, 'id': id},
                   dataType: "json",
                   success: function (data) {
                       calendar.fullCalendar('refetchEvents');
                       alert('Event Update');
                   },
                   error: function (data) {
                       alert('There is a problem!!!');
                   }
               });
           },

           eventDrop: function (event) {
               var start = $.fullCalendar.formatDate(event.start, "Y-MM-DD HH:mm:ss");
               var end = $.fullCalendar.formatDate(event.end, "Y-MM-DD HH:mm:ss");
               var title = event.title;
               var id = event.id;
               $.ajax({
                   type: "GET",
                   url: '/update',
                   data: {'title': title, 'start': start, 'end': end, 'id': id},
                   dataType: "json",
                   success: function (data) {
                       calendar.fullCalendar('refetchEvents');
                       alert('Event Update');
                   },
                   error: function (data) {
                       alert('There is a problem!!!');
                   }
               });
           },

           eventClick: function (event) {
               if (confirm("Are you sure you want to remove it?")) {
                   var id = event.id;
                   $.ajax({
                       type: "GET",
                       url: '/remove',
                       data: {'id': id},
                       dataType: "json",
                       success: function (data) {
                           calendar.fullCalendar('refetchEvents');
                           alert('Event Removed');
                       },
                       error: function (data) {
                           alert('There is a problem!!!');
                       }
                   });
               }
           },

       });
   });

</script>
</body>
</html>

fullcalendar/myapp/templates/index.html


{% extends "base.html" %}
   
{% block title %}Python Django Ajax FullCalender CRUD (Create, Read, Update and Delete){% endblock title %}
   
{% block content %}
<div class="col-md-12">    
    <div id='calendar'></div> 
</div> 
{% endblock content %}

python3.7.8 django3.2.25

注意修改settings里的数据库配置，修改好后执行

python manage.py makemigrations

python manage.py migrate