如何在全日历中显示从数据库中获取事件的时间

2024-05-26

你好朋友在我的应用程序中,我真的制作了一个弹出页面,它在数据库中插入事件,并从数据库中获取事件,但事件没有按时间显示数据/读取有一系列事件,其中包含 eventid、eventtitle、start、end 和格式类似数组


[{"id":"10","title":"ramukaka","start":"2013-04-04 18:44:00","end":"2013-04-05 18:44:00 "},{"id":"11","title":"rameshbhai","start":"2013-04-11 20:28:00","end":"2013-04-03 20:28 :00"}]


所以我必须做什么,我不知道,现在我尝试更新事件,这些事件重新打开一个弹出表单,并已在编辑模式下填写,并且如果修改标题或在另一个日期拖放等事件的更改也存储在数据库中eventid(每个事件都是唯一的)所以我必须做的代码与下面的相同


1)如果存在事件修改,如何在数据库中存储更新事件/事件

2)插入成功后不报警

3)在eventsource中如何获取事件开始时间,结束时间,与mysql格式相同(“yyyy-MM-dd H:mm:ss”)

4) 如何通过 eventid 删除一个或多个事件以及在数据库中进行的更改

JavaScript:

<script>

    $(document).ready(function() {
        var count=0;
        var liveDate=new Date();
        var dat = new Date();
        var d = dat.getDate();
        var m = dat.getMonth();
        var y = dat.getFullYear();
        $.getJSON("<?php echo base_url(); ?>names",function(data){
            var select = $('#AgentName'); //combo/select/dropdown list
            if (select.prop) {
                var options = select.prop('options');
            }
            else {
                var options = select.attr('options');
            }
            $('option', select).remove();
            $.each(data, function(key, value){
                options[options.length] = new Option(value['name'], value['id']);
            });
        });
        var calendar = $('#calendar').fullCalendar({
           header: {
               left: 'prev,next today',
               center: 'title',
               right: 'month,agendaWeek,agendaDay'
           },
           selectable: true,
           selectHelper: true,
           select: function(start, end, allDay) {
               $("#popup").show();
               $("#eventName").focus();
               $("#submit").click(function(){
                   var title=$("#eventName").val();
                   if (title) {
                       calendar.fullCalendar('renderEvent',{
                           title: title,
                           start: start,
                           end: end,
                           allDay: false
                           },
                       true // make the event "stick"
                       );
                       var dataString={};
                       dataString['eventName']=title;
                       dataString['startTime']=$.fullCalendar.formatDate(start, "yyyy-MM-dd H:mm:ss");
                       dataString['endTime']=$.fullCalendar.formatDate(end, "yyyy-MM-dd H:mm:ss");
                       $.ajax({
                           type : 'POST',
                           dataType : 'json',
                           url : '<?php echo base_url(); ?>data/insert',
                           data: dataString,
                           success: function(data) {
                               alert("Data Insert SuccessFully");
                               if(data.success)
                                   alert("Data Insert SuccessFully");
                           }
                       });
                   }
               });
           },
           editable: true,
           viewDisplay: function(view) {
               if(view.name=="month" && count==0){
                   var a=$(".fc-day-number").prepend("<img src='/assets/images/add.jpg' width='20' height='20'style='margin-right:80px;' name='date'>");                                    
                   count++;
               }
           },
           eventSources: [
               {
                   url: '<?php echo base_url(); ?>data/read',
                   type: 'POST',
                   id:id,
                   title:title,
                   start:new Date(start),
                   end:new Date(end),// use the `url` property
                   color: '#65a9d7',    // an option!
                   textColor: '#3c3d3d'  // an option!
                }                    
            ],
            eventClick : function (start,end){
                $("#popup").open();
                $("#submit").click(function(){
                    var title=$("#eventName").val();
                    if (title) {
                        calendar.fullCalendar('renderEvent',{
                            title: title,
                            start: start,
                            end: end,
                            allDay: false
                            },
                            true // make the event "stick"
                        );
                        var dataString={};
                        dataString['eventName']=title;
                        dataString['startTime']=$.fullCalendar.formatDate(start, "yyyy-MM-dd H:mm:ss");
                        dataString['endTime']=$.fullCalendar.formatDate(end, "yyyy-MM-dd H:mm:ss");
                        $.ajax({
                            type : 'POST',
                            dataType : 'json',
                            url : '<?php echo base_url(); ?>data/update',
                            data: dataString,
                            success: function(data) {
                                alert("Data Insert SuccessFully");
                                if(data.success)
                                    alert("Data Insert SuccessFully");
                            }
                        });
                    }
                    calendar.fullCalendar('unselect');
                    calendar.fullCalendar('refetchEvents');
                    $("#popup").hide();
                });
            }

        });
    });
</script>

CSS CODE:
<style>
/*
*/      body {
                text-align: left;
                font-size: 14px;
                font-family: "Lucida Grande",Helvetica,Arial,Verdana,sans-serif;
                }
        #calendar {
                width: 70%;
                margin: 0 auto;
                text-align:left;
                }
        #popup{
 position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    background: #000;
    display: none;
    width:100%;
    height: 100%;
    opacity:0.5;
    border:1px;
    font-size: 13px;
    padding-top: 20%;
    padding-left: 43%;
    border-color: #0033ff;
        }
        #popup table{
            border-color: #00620C;
            border-style: solid;
            border: 5px;

        }
        #popup input{
            width:80px;
            border-radius: 5px;
        } 
        #popup table label{
            font-size: 12px;
        }
</style>

HTML CODE:

<div class="wrapper">
    <div id='calendar'></div>
    <div id="detail"></div>
    <div id="popup"> 
        <form name="addData" id="addData" action="" method="post">
            <table>
                <tr>
                    <td><input type="hidden" name="eventID" id="eventID"></td>
                </tr>
                <tr>
                    <td><label for="eventName">Description : </label></td>
                    <td><input name="eventName" id="eventName"type="text"></td>
                </tr>
                <tr>
                    <td><label for="AgentName">AgentName : </label></td>
                    <td><select name="AgentName" id="AgentName"></select></td>
                </tr>
                <tr>
                    <td><label for="UserName">UserName : </label></td>
                    <td><select name="UserName" id="UserName"></select></td>
                </tr>
                <tr>
                    <td align="left"colspan="2"><button type="submit"class="k-button" name="submit" id="submit">Submit</button>
                        <button type="reset" name="reset" class="k-button" id="reset">Reset</button>
                        <button type="submit"class="k-button" name="cancel" id="cancel">Cancel</button>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

只是事件属性的 url,从数据库返回 Json 数据。

 $('#calendar').fullCalendar({

        header: {
            left: 'prev,next today',
            center: 'title',
            right: 'month,basicWeek,basicDay'
        },
        editable: true,
        async : false,
        timeFormat: {

                        '': 'h:mm{ - h:mm}'           
                          },
        events: {
            url: "http://url/getMonthlyEventList"
            }
});

并且 json 数据可以采用这种格式。和我一起工作得很好。

       [{"title":"event1","start":"2013-10-12 13:00:00","end":"2013-10-18 16:00:00","allDay":0},
       {"title":"event2","start":"2013-10-28 13:00:00","end":"2013-10-28 15:00:00","allDay":0}]
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在全日历中显示从数据库中获取事件的时间 的相关文章

  • PHP 数组通过 JSON 转为 jquery 数组

    我有点困惑为什么以下不起作用 get php
  • 编辑第一个选项名称

    我有以下我无法访问的代码 我想要做的是将一些文本添加到现在为空的第一个选项中 诸如 选择地址 之类的文本
  • 主页(网格)上的缩略图现在显得模糊。如何纠正?

    我不知道这看起来是否愚蠢 但从早上开始我就无法纠正这个突然出现在我的博客网站上的错误www candidopinions in http www candidopinions in 我有一个网格视图模板 其中博客文章中的特色图像作为调整大小
  • 没有输入的 jQuery 日期选择器

    我有一个相当复杂的网络应用程序 我想向其中添加一些日期选择 UI 我遇到的问题是我无法从文档中弄清楚如何真正控制日期选择器的出现方式和时间 不涉及任何表单元素 不 我不会添加秘密表单字段 因此简单的开箱即用方法根本行不通 我希望有人可以提供
  • 如何使用 jquery 拖动文本区域和输入

    我在用jQuery UI draggable拖动元素 但它似乎不适用于文本区域和输入 因为每当我单击它们时它们就会聚焦 这里有一个JSbin 演示 http jsbin com ICEYaZor 1 edit html js output的
  • 将经常使用的小型 jQuery 插件附加到 common.js 文件的末尾是否被认为是不好的做法或不道德?

    我的很多 jQuery 项目都使用子菜单 我坚信使用悬停意图 http plugins jquery com project hoverIntentjQuery 原生插件hover http api jquery com hover 出于可
  • JQuery - 通过 $.each 循环查找表中的文本框值

    我有一个 HTML 表格 这个 HTML 表格的第一行是静态的 当他们单击一个 按钮时 意味着 行将动态添加 用户想要删除一行意味着 他单击一个 按钮意味着当前行被删除 每行有 4 个文本框 我的 Jquery 代码如下 var First
  • 选择所有选项值而不是第一个

    我有一个正在运行的脚本 可以根据所选的下拉选项显示 隐藏 div 在用户在下拉列表中进行选择之前 我需要隐藏除第一个 div 之外的所有 div 根据下面的脚本 如何从除第一个选项之外的所有选项中获取值 以便隐藏除第一个 div 之外的所有
  • jquery ui 自动完成与委托

    我已经根据文档设置了 JQuery UI 自动完成功能 它适用于渲染到页面的 class tag item 的任何输入 然而 用户可以通过 JS 将输入添加到 dom 中 因此我需要一种使用委托将自动完成绑定到新的动态创建的输入的方法 我不
  • 使用 jquery 远程图像属性

    目前我正在尝试获取远程图像宽度 高度 我正在开发一个链接共享模块 就像当你在 Facebook 上粘贴链接时 你可以看到标题 描述和图像 所以我尝试使用 php getimagesize 来获取图像宽度 高度 但速度非常慢 所以我正在考虑使
  • ajaxChosen 插件将无法工作

    我整个下午都在摆弄 ajaxChosen 因为我喜欢 Chosen 但我的选项值集变得太大了 我也尝试过 select2 但它太慢了 http harvesthq github io chosen http harvesthq github
  • 如何格式化 Highcharts 的 (x,y) 对数据的日期时间

    我的序列化方法会产生如下所示的日期时间字符串 2014 07 09T12 30 41Z 为什么下面的代码不起作用 function container highcharts xAxis type datetime series data x
  • focusout 事件后,Mouseleave 事件在 Firefox 中无法持续触发

    我正在运行以下代码
  • jQuery AJAX 请求在 IE8 中失败,并显示消息“错误:调用 open 方法之前无法调用此方法。”

    我正在使用 jQuery 1 4 2 并尝试执行一个简单的 AJAX 请求 目标 URL 返回一个 JSON 字符串 我使用 jslint 对其进行了验证 该请求在 Firefox 和 Chrome 中有效 但不想在 IE8 中工作 我无法
  • JQuery Mobile 与 MVC 的链接

    我正在使用 ASP NET MVC 3 和 Razor UI 设置 JQuery 移动网站 我正在生成我的链接 例如 a href See Group 2 a 假设我从 Home Index 访问它 我遇到的问题是 当我点击链接时 它会出现
  • Jquery 数据表列总和

    我只是参考一下这个链接 https datatables net examples advanced init footer callback html了解如何获取 jquery 数据表中的列总计 但我已经完成了一半的项目 我在html页面
  • 使用 Jquery 清除 5 个空 TD

    我有一个正在填充的动态表 我知道我不应该这样做 但是你会如何连续找到 5 个空 TD 并隐藏它们呢 因此 如果行包含 5 个空 TD 则不显示 TD 我想删除每个实例 td td td td td td td td td td 在 DOM
  • 如何解决 Typescript 构建中的错误“找不到模块 'jquery'”

    我目前在 ts 文件的顶部有这个import require jquery 我这样做是因为我试图在我的打字稿文件中使用 jquery 但我似乎无法编译它 因为它返回标题中所述的错误 我正在使用 ASP NET CORE 脚本文件夹 tsco
  • 刷新页面时保存用户的选择

    我目前有一个页面显示不同团队的数据 我有一些数据 用户可以单击使其处于 打开 或 关闭 状态 并为每个数据显示不同的图标 它基本上就像一个清单 只是没有物理复选框 我想记住哪些 复选框 已被选中 即使在用户刷新页面或关闭浏览器并稍后返回之后
  • DataTables row.add 到特定索引

    我正在替换这样的行项目 var targetRow entity row dataTable targetRow closest table dataTable DataTable dataTable row targetRow remov

随机推荐