Question

Hello Friends在我的应用程序中我需要使用FullCalendar.js和anytime.js所以如何制作相同的格式，如“Tue Apr 02 2013 00:00:00 05:30（IST）”和更多如何从数据库获取数据（事件名称，开始时间，结束时间），分别显示开始时间和结束时间，如果每天/每周都有特定时间和日期完成任何事件，那么我如何在完整日历中显示如果对数据库中存储的事件进行更改，请朋友帮帮我

完整日历代码：

<script type='text/javascript'>

    $(document).ready(function() {  
            var count=0;
        /* initialize the calendar
        -----------------------------------------------------------------*/
        $('#calendar').fullCalendar({
                        axisFormat:'HH:mm',
            header: {

                left: 'prev,next today',
                center: 'title',
                right: 'month,agendaWeek,agendaDay'
            },
                 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++;
                                }
                            if(view.name=="agendaDay" || view.name=="agendaWeek"){
                                $("#popup").hide();
                                count++;
                            }

                        },
                    slotMinutes:5,
            editable: true,
            droppable: true, // this allows things to be dropped onto the calendar !!!
                        timeFormat: 'H(:mm)',
                        events:"<?php echo base_url();?>data/read",
                        eventClick : function (calEvent, jsEvent, view){
                console.log(calEvent);                                
            },
            dayClick : function (date, allDay, jsEvent, view){
                console.log(jsEvent);   
                                        alert(date);
                                        $("#popup").show();
                                       $("#popup").css({left : jsEvent.clientX, top : jsEvent.clientY});
                                       var getdata = $.getJSON( "data", function() {
                                        console.log( "success" );
})
            }


    });

});
</script>

anyTime.js代码：

  <script>
        $('#startTime').focus(
                function(e) {

                        $('#startTime').AnyTime_picker({format:"%a %b %d %Y %h:%i"}).focus();
                        e.preventDefault();
                    });               
        $('#endTime').focus(
                function(e) {
                    $('#endTime').AnyTime_picker({format:"%a %b %d %Y %T"}).focus();
                    e.preventDefault();
                }); 
                $(function(){

                    $(".k-button").click(function(){
                        var eventName=$("#eventName").val();
                        var startTime=$("#startTime").val();
                        var endTime=$("#endTime").val();
                        var dataString={};
                        dataString['eventName']=eventName;
                        dataString['startTime']=startTime;
                        dataString['endTime']=endTime;
                    if(eventName==""||startTime==""||endTime==""||startTime>endTime)
                        {
                            alert("Please Data Enter Properly");
                        }

                        else
                        {
                            $.ajax({
                                    type : 'POST',
                                    dataType : 'json',
                                    url : '<?php echo base_url();?>data/insert',
                                    data: dataString,
                                    cache:false,
                                    success: function(data) {
                                            if(rsp.success)
                                                alert("Data Insert SuccessFully");
                                    }
                             });
                         }
                   });
                                       });
                             </script>

Html代码：

<div id="popup"> 
    <form name="addData" id="addData" action="" method="post">
        <table>
            <tr>
                <td><lable for="eventName">Description:</lable></td>
                <td><input name="eventName" id="eventName"></td>
            </tr>
            <tr>
                <td><lable for="startTime">Start: </td>
                <td><input type="text" id="startTime"name="startTime"/></td>
            </tr>
            <tr>
                <td><lable for="endTime">End: </td>
                <td><input type="text" id="endTime"name="endTime"/></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>
                </td>
            </tr>
        </table>
    </form>

Answer 1

我不确定我是否正确理解您的问题，而且我不知道如何使用fullCalendar。但是，我认为您可能会问如何使用日历中的值填充日期字段。如果是这样，那么您可以使用AnyTime.Converter格式化值。我认为您希望将此代码放入dayClick处理程序：

var conv = new AnyTime.Converter({format:"%a %b %d %Y %h:%i"});
$('#startTime').val( conv.format( date ) );

请注意，您使用的格式说明符必须与选择器和转换器相同。

此外，代码中的格式与您在问题中提到的格式不一致（它不包括time zone specifiers）。与您的问题匹配的格式为：

"%a %b %d %Y %T %: (%@)"

在此示例中，要使%@只是“IST”，您必须确保time zone label中只显示“IST”，如：

AnyTime.utcLabel[330]=['IST'];

在将日期/时间保存回数据库的代码中，可以使用相同的AnyTime.Converter将字段中的值解析回JS Date Object;例如：

var newDate = conv.parse( $('#startTime').val() );

我怀疑这个答案并没有完全解决你的问题，但我希望它能指出你正确的方向。

如何制作完整日历和任何时间的相同日期格式.js以及如何显示/添加/修改/删除存储在数据库中的事件

1 个答案: