个人中心
gpt4 book ai didi

javascript - 未显示全日历模式

转载 作者：行者123 更新时间：2023-12-02 23:01:15 25 4
gpt4 key购买 nike

我正在尝试根据 this 在 Djnago 中为 fullcalendar 设置 html 模式和this解决方案，但不显示模式[无弹出窗口]。我尝试根据link找到解决方案，但没有结果。

感谢您提供任何解决方案。

包导入:

<script type="text/javascript" src="{% static 'js/jquery.min.js' %}"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-modal/2.2.5/js/bootstrap-modal.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>

<link href='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js'></script>

脚本:

<script type='text/javascript'>

    document.addEventListener('DOMContentLoaded', function() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'pl',
            selectable: true,
            plugins: ['interaction', 'dayGrid'],
            firstDay : 1,
            header: {
                left: 'today',
                center: 'title',
                right: 'prev, next',
            },
            events: [
                {% for event in events %}
                    {
                        id: '{{event.id}}',
                        title: '{{event.title}}',
                        description: '{{event.description}}',
                        start: '{{event.start_date|date:"Y-m-d"}}',
                        end: '{{event.end_date|date:"Y-m-d"}}',
                        color: {% if event.done %}'YellowGreen '{%else%}'SkyBlue '{%endif%},
                        allDay: false,
                    },
                {% endfor %}
            ],

            eventClick: function(event) {
                $('#fullCalModal').modal();
                $('#modalTitle').html(event.title);
                $('#modalBody').html(event.description);
            },

        });
        calendar.render();
    });
</script>

html:

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

<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body"></div>
        </div>
    </div>
</div>

最佳答案

我已更新 bootstrap 并将 bootstrap.css 添加到 HTML 中。

一个文件代码:

<head>
<script src="https://unpkg.com/jquery@3.4.1/dist/jquery.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.2/moment.min.js"></script>

<link href='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.css' rel='stylesheet' />
<link href='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.css' rel='stylesheet' />
<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css' rel='stylesheet' />
<script src='https://unpkg.com/@fullcalendar/core@4.3.1/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/interaction@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/daygrid@4.3.0/main.min.js'></script>
<script src='https://unpkg.com/@fullcalendar/timegrid@4.3.0/main.min.js'></script>
</head>

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

<div id="fullCalModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modalTitle" class="modal-title"></h4>
            </div>
            <div id="modalBody" class="modal-body"></div>
        </div>
    </div>
    Test
</div>

<script>

    function loadCalendar() {
        var calendarEl = document.getElementById('calendar');
        var calendar = new FullCalendar.Calendar(calendarEl, {
            locale: 'pl',
            selectable: true,
            plugins: ['interaction', 'dayGrid'],
            firstDay : 1,
            header: {
                left: 'today',
                center: 'title',
                right: 'prev, next',
            },
            events: [
                {
              title: 'All Day Event',
              description: 'www',
              start: '2019-09-03'
                },
            ],

            eventClick: function(event) {
                console.log('modal', event);
                $('#fullCalModal').modal();
                $('#modalTitle').html(event.event.title);
                $('#modalBody').html(event.event.extendedProps.description);
            },

        });
        calendar.render();
    };

    if (document.readyState !== 'complete') {
            document.addEventListener('DOMContentLoaded', loadCalendar);
    } else {
            loadCalendar();
    }
</script>

在线工作示例:https://jsfiddle.net/m2xwphLj/

关于javascript - 未显示全日历模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57770196/

25 4 0
文章推荐： JavaScript 按字节长度 chop 文本
文章推荐： javascript - Konva - 清除图层但保留背景
文章推荐： javascript - 如何将 wasm.instance.exports 对象发布到 WebWorkers 或从 WebWorkers 发布？
文章推荐： javascript - 在受尊敬的父级上切换下拉菜单的 ngClass
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com