个人中心
gpt4 book ai didi

javascript - 带日期范围选择器的全日历

转载 作者：行者123 更新时间：2023-12-03 05:57:09 24 4
gpt4 key购买 nike

我想在我的 Fullcalendar 上有一个日期选择器范围。我看过一些帖子，您可以使用日期选择器选择日期，但我希望用户能够选择开始和结束日期。

datepicker (1 date only)

我的全日历如下图所示，我想在红色方 block 上添加日期选择器。

enter image description here

这是我正在使用的代码。如何/在哪里添加日期选择器？

<script>
    $(document).ready(function() {
        $('#calendar').fullCalendar({
            header: {
                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
            defaultDate: '2016-09-12',
            navLinks: true, // can click day/week names to navigate views
            selectable: true,
            selectHelper: true,
            select: function(start, end) {
                var title = prompt('Event Title:');
                var eventData;
                if (title) {
                    eventData = {
                        title: title,
                        start: start,
                        end: end
                    };
                    $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
                }
                $('#calendar').fullCalendar('unselect');
            },
            eventClick: function(event, element) {
                event.title = prompt('Event Title:',event.title );
                $('#calendar').fullCalendar('updateEvent', event);
            },
            editable: true,
            eventLimit: true, // allow "more" link when too many events
        });

        $('#datepicker').datepicker({
            inline: true,
            onSelect: function(dateText, inst) {
                var d = new Date(dateText);
                $('#fullcalendar').fullCalendar('gotoDate', d);
            }
        }); 
    });
</script>

<style>
    body {
        margin: 40px 10px;
        padding: 0;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        font-size: 14px;
    }

    #calendar {
        max-width: 900px;
        margin: 0 auto;
    }
</style>
</head>
<body>
    <div id='calendar'></div>
    <div id='datepicker'></div>
</body>

最佳答案

好的，这就是适合您的工作。但首先，对您的问题做一些说明:

  1. 如果您想使用提示来执行此操作，则需要三个提示(一个用于标题，另一个用于开始，另一个用于结束)。现在您应该知道自定义提示并不容易。
  2. 您应该选择一个要使用的日期选择器库

现在，解释一下下面的代码:

  1. 我正在使用Bootstrap Modal向用户请求数据
  2. 我正在使用Bootstrap Eonasdan Datetimepicker ，没有选项(您应该根据您的需要进行自定义)
  3. 这个想法是在用户选择日期时打开模式，填写数据，单击“保存”按钮，将事件添加到 fullcalendar，清除模式字段并关闭对话框。

首先，您需要写下模式的 HTML，如下

<div class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title">Create new event</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="title">Event title</label>
                        <input type="text" name="title" id="title" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="starts-at">Starts at</label>
                        <input type="text" name="starts_at" id="starts-at" />
                    </div>
                </div>
                <div class="row">
                    <div class="col-xs-12">
                        <label class="col-xs-4" for="ends-at">Ends at</label>
                        <input type="text" name="ends_at" id="ends-at" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary" id="save-event">Save changes</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

您的 JavaScript 应该更新为:

$(document).ready(function() {

    $('#calendar').fullCalendar({
        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,agendaWeek,agendaDay'
        },
        defaultDate: '2016-09-12',
        navLinks: true, // can click day/week names to navigate views
        selectable: true,
        selectHelper: true,
        select: function(start, end) {
            // Display the modal.
            // You could fill in the start and end fields based on the parameters
            $('.modal').modal('show');

        },
        eventClick: function(event, element) {
            // Display the modal and set the values to the event values.
            $('.modal').modal('show');
            $('.modal').find('#title').val(event.title);
            $('.modal').find('#starts-at').val(event.start);
            $('.modal').find('#ends-at').val(event.end);

        },
        editable: true,
        eventLimit: true // allow "more" link when too many events

    });

    // Bind the dates to datetimepicker.
    // You should pass the options you need
    $("#starts-at, #ends-at").datetimepicker();

    // Whenever the user clicks on the "save" button om the dialog 
    $('#save-event').on('click', function() {
        var title = $('#title').val();
        if (title) {
            var eventData = {
                title: title,
                start: $('#starts-at').val(),
                end: $('#ends-at').val()
            };
            $('#calendar').fullCalendar('renderEvent', eventData, true); // stick? = true
        }
        $('#calendar').fullCalendar('unselect');

        // Clear modal inputs
        $('.modal').find('input').val('');

        // hide modal
        $('.modal').modal('hide');
    });
});

这对你来说是一个开始。您需要做很多事情来改进这一点。请注意，当您编辑一个事件时，这将创建一个新事件，但我让您自行解决。

为了您的方便，我创建了 a jsfiddle您可以在其中查看此工作以及使用的依赖项。

关于javascript - 带日期范围选择器的全日历，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39877381/

24 4 0
文章推荐： javascript - 多个 HTTP 客户端请求不存储 session 数据
文章推荐： javascript - 使用另一个按钮更改按钮文本
文章推荐： javascript - 获取 SVG 中 g 元素的同级元素是使用 jquery 从页面上的其他 SVG 返回所有相似的级别元素。为什么？
文章推荐： javascript - 以编程方式更改 Highmaps 中的形状颜色
行者123
个人简介

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

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