jquery - 更改输入元素时,使用动态自定义数据在 fullcalendar 中渲染事件

标签 jquery html fullcalendar

我正在尝试动态渲染自定义事件以显示在页面上的完整日历上, 我从 url 获取已经存在的事件 $(.id).fullCalendar('addEventSource', '渲染json的文件名');

但我不知道如何渲染新事件

最佳答案

这是一个使用 demos 文件夹中的 default.html 的快速示例。我假设您创建一个事件并将其保存到数据库并希望该事件在日历上呈现。引用这部分文档:

http://arshaw.com/fullcalendar/docs/event_rendering/renderEvent/ http://arshaw.com/fullcalendar/docs/event_rendering/rerenderEvents/

此示例使用 renderEvent。单击该按钮后,将创建一个事件并将其呈现在日历上。

<!DOCTYPE html>
<html>
<head>
<link href='../fullcalendar/fullcalendar.css' rel='stylesheet' />
<link href='../fullcalendar/fullcalendar.print.css' rel='stylesheet' media='print' />
<script src='../lib/jquery.min.js'></script>
<script src='../lib/jquery-ui.custom.min.js'></script>
<script src='../fullcalendar/fullcalendar.min.js'></script>
<script>
    $(document).ready(function() {

        var date = new Date();
        var d = date.getDate();
        var m = date.getMonth();
        var y = date.getFullYear();

        $('#button_id').click(function() {
            var newEvent = {
                title: 'NEW EVENT',
                start: new Date(y, m, d)
            };
            $('#calendar').fullCalendar( 'renderEvent', newEvent , 'stick');
        });

        $('#calendar').fullCalendar({
            editable: true
        });

    });

</script>
<style>

    body {
        margin-top: 40px;
        text-align: center;
        font-size: 14px;
        font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
        }

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

</style>
</head>
<body>
<button type="button" id="button_id" onClick=>Create new event</button>
<div id='calendar'></div>
</body>
</html>

关于jquery - 更改输入元素时,使用动态自定义数据在 fullcalendar 中渲染事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/19603956/

相关文章:

javascript - 使用 Angular 转发器提醒多个输入的输入值

javascript - 如何在移动设备中显示图像而不是视频背景

javascript - 无法获取 Canvas 内容的 toDataURL

javascript - 来自 jquery 事件的回调函数

javascript - 如何将全日历事件限制为只有一天?

javascript - 在FullCalendar dayClick事件中,能否获取点击日期已经存在的事件?

javascript - 在 JQuery 中,如何通过仅单击按钮而不是整个元素来删除 li 元素?

c# - 从 Asp.net webMethod 返回 Json 对象到 Ajax 调用

javascript - 将事件绑定(bind)到尚未创建的元素 jquery

Javascript innerHTML 更改不起作用