如何使相同的日曆格式的全日曆和anytime.js以及如何顯示/添加/修改/刪除存儲在數據庫中的事件

Question

你好朋友在我的應用程序中我需要使用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」，你必須確保只有「IST」出現在你的time zone label，如：

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

在你的代碼保存回日期/時間到數據庫中，你可以使用相同的AnyTime.Converter解析從外地回一個JS Date對象的值;例如：

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

我懷疑這個答案並不能完全解決問題，但我希望這點你在正確的方向。