Javascript 带有Django 2.x或3.x的Django FullCalendar_Javascript_Python_Django_Fullcalendar_Fullcalendar 4

Javascript 带有Django 2.x或3.x的Django FullCalendar

javascript python django fullcalendar

Javascript 带有Django 2.x或3.x的Django FullCalendar,javascript,python,django,fullcalendar,fullcalendar-4,Javascript,Python,Django,Fullcalendar,Fullcalendar 4,好吧，我知道这个问题已经被问了很多次了，但我自己似乎不明白。我需要在Django应用程序中实现FullCalendar，在我下载了FullCalendar以及所有的静态信息之后，在我的页面上呈现它之后，我就不能随意添加新事件了我有我的事件模型，包括开始日期、结束日期、id和标题，就像这里有人解释的那样。之后，我在views.py中创建了一个名为all_events的函数，其中event=event.object.all（），并将其放入上下文变量中。我现在没有表单，我只想在我从我的管理页面输入数

好吧，我知道这个问题已经被问了很多次了，但我自己似乎不明白。我需要在Django应用程序中实现FullCalendar，在我下载了FullCalendar以及所有的静态信息之后，在我的页面上呈现它之后，我就不能随意添加新事件了

我有我的事件模型，包括开始日期、结束日期、id和标题，就像这里有人解释的那样。之后，我在views.py中创建了一个名为all_events的函数，其中event=event.object.all（），并将其放入上下文变量中。我现在没有表单，我只想在我从我的管理页面输入数据后呈现它-现在。希望尽可能简单。这是我的代码：

models.py

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:
        verbose_name = 'Event'
        verbose_name_plural = 'Events'

    def __str__(self):
        return self.name

和我的html页面：

{% extends 'base.html' %}
{% load static %}
{% block content_row %}
    <!DOCTYPE html>
    <html>
    <head>
        <link href='{% static 'fullcalendar/packages/core/main.css' %}' rel='stylesheet'/>
        <link href='{% static 'fullcalendar/packages/daygrid/main.css' %}' rel='stylesheet'/>
        <link href='{% static 'fullcalendar/packages/timegrid/main.css' %}' rel='stylesheet'/>
        <link href='{% static 'fullcalendar/packages/list/main.css' %}' rel='stylesheet'/>
        <script>

            document.addEventListener('DOMContentLoaded', function () {
                let calendarEl = document.getElementById('calendar');

                let calendar = new FullCalendar.Calendar(calendarEl, {
                    height: 'auto',
                    locale: 'sr',
                    plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
                    defaultView: 'timeGridWeek',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    defaultDate: '2019-12-13',
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: [
                        {% for e in eventlist %}
                            {
                                title: '{{ e.event_name }}',
                                start: '{{ e.start_date|date:"Y-m-d" }}',
                                end: '{{ e.end_date|date:"Y-m-d" }}',
                            },
                        {% endfor %}
                    ]
                });

                calendar.render();
            });

        </script>
        <style>

            body {
                margin: 40px 10px;
                padding: 0;
                font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
                font-size: 14px;
            }

            #calendar {
                max-width: 900px;
                margin: 0 auto;
            }

        </style>
    </head>
    <body>

    <div id='calendar'></div>

    <script src='{% static 'fullcalendar/packages/core/main.js' %}'></script>
    <script src='{% static 'fullcalendar/packages/interaction/main.js' %}'></script>
    <script src='{% static 'fullcalendar/packages/daygrid/main.js' %}'></script>
    <script src='{% static 'fullcalendar/packages/timegrid/main.js' %}'></script>
    <script src="{% static 'fullcalendar/packages/core/locales/sr.js' %}"></script>
    </body>
{% endblock %}

{%extends'base.html%}
{%load static%}
{%block content_row%}
document.addEventListener（'DOMContentLoaded'，函数（）{
让calendarEl=document.getElementById（'calendar'）；
let calendar=new FullCalendar.calendar（calendarEl{
高度：“自动”，
地区：'sr'，
插件：['dayGrid'，'timeGrid'，'list'，'interaction']，
defaultView:“timeGridWeek”，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、timeGridDay、listWeek”
},
默认日期：“2019-12-13”，
navLinks:true，//可以单击日/周名称来导航视图
是的，
eventLimit:true，//当事件太多时允许“更多”链接
活动：[
{eventlist%中的e的%s}
{
标题：“{e.event_name}}”，
开始：“{e.start_date}日期：“Y-m-d”}”，
结束：“{e.end_date{124; date:“Y-m-d”}”，
},
{%endfor%}
]
});
calendar.render（）；
});
身体{
利润率：40像素10像素；
填充：0；
字体系列：Arial、Helvetica Neue、Helvetica、无衬线字体；
字体大小：14px；
}
#历法{
最大宽度：900px；
保证金：0自动；
}
{%endblock%}

这是我的页面源代码，似乎我有来自数据库的事件，但没有数据

<script>

            document.addEventListener('DOMContentLoaded', function () {
                let calendarEl = document.getElementById('calendar');

                let calendar = new FullCalendar.Calendar(calendarEl, {
                    height: 'auto',
                    locale: 'sr',
                    plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
                    defaultView: 'timeGridWeek',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    defaultDate: '2019-12-13',
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: [

                            {
                                title: '',
                                start: '',
                                end: '',
                            },

                            {
                                title: '',
                                start: '',
                                end: '',
                            },

                            {
                                title: '',
                                start: '',
                                end: '',
                            },

                    ]
                });

                calendar.render();
            });

        </script>


document.addEventListener（'DOMContentLoaded'，函数（）{
让calendarEl=document.getElementById（'calendar'）；
let calendar=new FullCalendar.calendar（calendarEl{
高度：“自动”，
地区：'sr'，
插件：['dayGrid'，'timeGrid'，'list'，'interaction']，
defaultView:“timeGridWeek”，
标题：{
左：“上一个，下一个今天”，
中心：'标题'，
右图：“dayGridMonth、timeGridWeek、timeGridDay、listWeek”
},
默认日期：“2019-12-13”，
navLinks:true，//可以单击日/周名称来导航视图
是的，
eventLimit:true，//当事件太多时允许“更多”链接
活动：[
{
标题：“”，
开始：“”，
结束：“”，
},
{
标题：“”，
开始：“”，
结束：“”，
},
{
标题：“”，
开始：“”，
结束：“”，
},
]
});
calendar.render（）；
});

我不需要任何花哨的东西，我只想知道它是如何工作的。我没有安装Django scheduler或Django fullcalendar，因为我不知道这是否是必需的？！所以，再一次，我在我的页面上正确地呈现了日历，而且静态的，我只是无法添加或查看模型中的任何事件。

希望得到我的答案。谢谢。

过了一段时间，我终于做对了。我将在这里发布我的代码

Those are Events in fullcalendar.html, with time hours.

events: [
          {% for i in events %}
             {
                  title: "{{ i.event_name}}",
                  start: '{{ i.start_date|date:"Y-m-d" }}T{{ i.start_date|time:"H:i"}}',
                  end: '{{ i.end_date|date:"Y-m-d" }}T{{ i.end_date|time:"H:i" }}',
              },
          {% endfor %}
        ]

浏览器控制台中有错误吗？你能告诉我们什么是

events:[{%for e in events%}{title:{{{e.name}]，start:{{e.start | date:{Y-m-d}，end:{{e.end | date:{Y-m-d}，}，{%endfor%}]

代码实际呈现（使用页面的“查看源代码”功能显示）？另外，从代码判断，您还没有包含所有必要的fullCalendar插件。每种视图类型（例如daygrid、timegrid、list等）和其他功能都需要一个单独的插件文件（大多数情况下，JS和CSS都包含在其中——您已经包含了核心JS文件，但没有插件文件，而且据我所知，根本没有CSS文件）。有关更多信息，请参阅和。我的base.html中有所有其他静态信息，但忘了提及，抱歉@adyson当我检查页面时，我有这样一个问题：来自“”的脚本被加载，即使它的MIME类型（“text/html”）不是有效的JavaScript MIME类型。加载源为“”的的的失败。TypeError:t是未为listNe加载的空插件文件

<script>

            document.addEventListener('DOMContentLoaded', function () {
                let calendarEl = document.getElementById('calendar');

                let calendar = new FullCalendar.Calendar(calendarEl, {
                    height: 'auto',
                    locale: 'sr',
                    plugins: ['dayGrid', 'timeGrid', 'list', 'interaction'],
                    defaultView: 'timeGridWeek',
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'dayGridMonth,timeGridWeek,timeGridDay,listWeek'
                    },
                    defaultDate: '2019-12-13',
                    navLinks: true, // can click day/week names to navigate views
                    editable: true,
                    eventLimit: true, // allow "more" link when too many events
                    events: [

                            {
                                title: '',
                                start: '',
                                end: '',
                            },

                            {
                                title: '',
                                start: '',
                                end: '',
                            },

                            {
                                title: '',
                                start: '',
                                end: '',
                            },

                    ]
                });

                calendar.render();
            });

        </script>

Those are Events in fullcalendar.html, with time hours.

events: [
          {% for i in events %}
             {
                  title: "{{ i.event_name}}",
                  start: '{{ i.start_date|date:"Y-m-d" }}T{{ i.start_date|time:"H:i"}}',
                  end: '{{ i.end_date|date:"Y-m-d" }}T{{ i.end_date|time:"H:i" }}',
              },
          {% endfor %}
        ]

My event function inside views.py

def event(request):
    all_events = Events.objects.all()
    get_event_types = Events.objects.only('event_type')

    if request.GET:
        event_arr = []
        if request.GET.get('event_type') == "all":
            all_events = Events.objects.all()
        else:
            all_events = Events.objects.filter(event_type__icontains=request.GET.get('event_type'))

        for i in all_events:
            event_sub_arr = {}
            event_sub_arr['title'] = i.event_name
            start_date = datetime.strptime(str(i.start_date.date()), "%Y-%m-%dT%H:%M:%S").strftime("%Y-%m-%dT%H:%M:%S")
            end_date = datetime.strptime(str(i.end_date.date()), "%Y-%m-%dT%H:%M:%S").strftime("%Y-%m-%dT%H:%M:%S")
            event_sub_arr['start'] = start_date
            event_sub_arr['end'] = end_date
            event_arr.append(event_sub_arr)
        return HttpResponse(json.dumps(event_arr))

    context = {
        "events": all_events,
        "get_event_types": get_event_types,

    }
    return render(request, 'app/yourFullcalendarPage.html', context)

Event urls.py

path('calendar/', event, name='calendar'),

And finaly, Events model.py

class Events(models.Model):
    event_id = models.AutoField(primary_key=True)
    event_name = models.CharField(max_length=255, null=True, blank=True)
    start_date = models.DateTimeField(null=True, blank=True)
    end_date = models.DateTimeField(null=True, blank=True)
    event_type = models.CharField(max_length=10, null=True, blank=True)

    def __str__(self):
        return str(self.event_name)

    class Meta:
        verbose_name = 'Event'
        verbose_name_plural = 'Events'