How to make same Date Format of Full calendar and anytime.js and how to show/add/modify/remove events stored in database

Question

Hello Friends In my Application I need To use FullCalendar.js and anytime.js so how can i make Same Both Format like "Tue Apr 02 2013 00:00:00 05:30 (IST)" and more how can i get data(eventname,starttime,endtime) from database which show respectively with start time and end time and if any event is done at each day/week with specific time and date then how can i show in full calendar and also if changes on a events stored in database please Friends Help me Out

Full Calendar Code :

<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 Code :

  <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 Code:

<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>

score 0 · Accepted Answer · answered Apr 03 '13 at 14:55

I am not sure if I understand your question correctly, and I do not know how to use fullCalendar. However, I think that you might be asking how to populate your date fields with the value from the calendar. If that is true, then you can use AnyTime.Converter to format the value. I think that you would want to put this code into your dayClick handler:

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

Be aware that the format specifier that you use must be the same for your picker and the converter.

Also, the format in your code does not match the format that you mentioned in your question (it does not include the time zone specifiers). The format that matches your question would be:

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

In this example, for the %@ to simply be "IST", you'll have to make sure that only "IST" appears in your time zone label, such as:

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

In your code to save the date/time back to the database, you can use the same AnyTime.Converter to parse the value from the field back into a JS Date Object; for example:

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

I suspect that this answer does not completely solve your problem, but I hope that it points you in the right direction.

How to make same Date Format of Full calendar and anytime.js and how to show/add/modify/remove events stored in database

1 Answers1