Merhabalar bugün sizlere Jquery takvim işlemleri hangi kütüphane ile nasıl kullanabiliriz anlatmak isterim.

Çoğu zaman projelerimizde takvim işlemleri yapmak isteyebiliriz, listeleme görüntüleme vs. gibi işlemleri en basit, hoş şekilde olmasını isteriz. Bu tarz durumlarda ise benim kullandığım ve hoşuma giden bir kütüphane olan fullcalendar‘i kullanıyorum. Kendinize göre düzenlemeler yapabilir çoklu dil desteğinden yararlanabilirsiniz. Linki incelediğinizde örnekleride görebilirsiniz haftalık , aylık, gibi özellikleri ekleyip çıkartabiliyorsunuz, sürükle bırak ile tarihleri taşıma işlemlerini yapabiliyorsunuz.

Jquery takvim işlemleri Örnek Kod

$("body").ready(function(){
    //calender
    var fullCalendar = function(){
        var calendar = function(){
            if($("#calendar").length > 0){
                function prepare_external_list(){
                    $('#external-events .external-event').each(function() {
                        var eventObject = {title: $.trim($(this).text())};
                        $(this).data('eventObject', eventObject);
                        $(this).draggable({
                            zIndex: 999,
                            revert: true,
                            revertDuration: 0
                        });
                    });
                }
                var date = new Date();
                var d = date.getDate();
                var m = date.getMonth();
                var y = date.getFullYear();
                prepare_external_list();
                var calendar = $('#calendar').fullCalendar({
                    header: {
                        left: 'prev,next today',
                        center: 'title',
                        right: 'month,agendaWeek,agendaDay,listMonth'
                        //right: 'month,agendaWeek,agendaDay'
                    },
                    defaultView: 'month',
                    editable: true,
                    locale: 'tr',
                    eventLimit:true,
                    daysToShow: 10,
                    eventSources: {url: "ajax.php?islem=takvimListesi" },
                    droppable: true,
                    allDayDefault : false,
                    axisFormat: 'H:mm',
                    /*timeFormat: {
                        agenda: ''
                    },*/
                    timeFormat: '(H:mm)',
                    selectable: true,
                    selectHelper: true,
                    dayClick: function(date, jsEvent, view) {
                        //console.log(jsEvent);
                        //if (view.name != 'month')
                        //    return;

                        if (view.name == 'month' || view.name == 'agendaWeek') {
                            $('#calendar').fullCalendar('changeView', 'agendaDay');
                            $('#calendar').fullCalendar('gotoDate', date);
                        }
                        return;
                    },
                    select: function(start, end, jsEvent, view) {
                        //console.log('geldi');
                        var start          =   start.format();
                        var startSplit     =   start.split('T');
                        var end            =   end.format();
                        var endSplit       =   end.split('T');
                        //
                        var startTarih     =   new Date(Date.parse(start,'dd-mm-yyyy H:i:s'));
                        var Tarih          =   new Date(Date.parse(end,'dd-mm-yyyy H:i:s'));
                        if( view.name == "mont" || view.name != "agendaDay" && view.name != "agendaWeek" )
                            return;
                        //
                        $('select#BaslangicGun option').each(function() { this.selected = (this.text == startTarih.getDate()); });
                        $('select#BaslangicAy option').each(function() { this.selected = (this.value == startTarih.getMonth()+1); });
                        $('select#BaslangicYil option').each(function() { this.selected = (this.text == startTarih.getFullYear()); });
                        $('select#BaslangicSaat option').each(function() { this.selected = (this.text == startTarih.getHours()); });
                        $('select#BaslangicDakika option').each(function() { this.selected = (this.text == startTarih.getMinutes()); });
                        //
                        $('select#BitisGun option').each(function() { this.selected = (this.text == startTarih.getDate()); });
                        $('select#BitisAy option').each(function() { this.selected = (this.value == startTarih.getMonth()+1); });
                        $('select#BitisYil option').each(function() { this.selected = (this.text == startTarih.getFullYear()); });
                        $('select#BitisSaat option').each(function() { this.selected = (this.text == startTarih.getHours()+1); });
                        $('select#BitisDakika option').each(function() { this.selected = (this.text == startTarih.getMinutes()); });
                        $('#kreaTakvim').modal('show');
                    },
                    eventDrop: function(event, delta, revertFunc) {

                        alert(event.title + " was dropped on " + event.start.format()+ ' '+ event.end.format());
                        if (confirm("Değişiklik yapmak istediğinize eminmisiniz?")) {
                            console.log('ids : '+event.ids+',tarih : '+event.start.format());
                            $.post( "ajax.php?islem=TakvimTarihDegistir", { id : event.ids,tarih : event.start.format(),tarih_bitis: event.end.format()} ).done(function( data ){
                                //alert(data);
                                if(data==0){
                                    alert('Tarihiniz Güncellenemedi!');
                                    revertFunc();
                                }
                            });
                        }
                        else
                        {
                            revertFunc();
                        }

                    },
                    eventResize: function(event, delta, revertFunc) {
                        var starts  =  event.start.format();
                        var ends    =  event.end.format();
                        alert(event.title + " was dropped on " + event.start.format()+ ' '+ event.end.format());
                        if (confirm("Değişiklik yapmak istediğinize eminmisiniz?")) {
                            //console.log('ids : '+event.ids+',tarih : '+event.start.format()+',tarih_bitis:'+event.end.format());
                            $.post( "ajax.php?islem=TakvimTarihDegistir", { id : event.ids,tarih : event.start.format(),tarih_bitis: event.end.format()} ).done(function( data ){
                                //alert(data);
                                if(data==0){
                                    alert('Tarihiniz Güncellenemedi!');
                                    revertFunc();
                                }
                            });
                        }
                        else
                        {
                            revertFunc();
                        }
                    },
                        /*eventResizeStart: function (event, jsEvent, ui, view) {
                            console.log('RESIZE START ' + event.title);

                        },
                        eventResizeStop: function (event, jsEvent, ui, view) {
                            console.log('RESIZE STOP ' + event.title);

                        },
                        eventResize: function (event, dayDelta, minuteDelta, revertFunc, jsEvent, ui, view) {
                            var starts  =  event.start.format();
                            var ends    =  event.end.format();
                            console.log('ids : '+event.ids+', start_date :'+ start+', end_date :'+ end);return;
                            //$.post( "{{ url('admin/api/randevuDateUpdate') }}", { ids: '22', start_date: starts, end_date: ends } )
                            //.done(function( data ){
                            //    if(data.success)
                            //    {
                            //        //$('#calendar').fullCalendar('removeEvents',event._id);
                            //        alert('{{ Lang::get('pagination.updated_success') }}!')
                            //    }
                            //});
                        },*/
                    /*columnFormat: {
                        month: 'dddd / MMMM / YYYY',    // Mon
                        week: '{ dddd } D / M', // Mon 9/7
                        day: 'D { dddd } / M'
                    },*/
                    eventRender: function(event, element) {
                        //$('div#outHtml').html(element.user_id);
                        /**
                         * Geliştirme
                         **/
                        //console.log(event['user_id']);
                        //console.log({/literal}{$user_session_id}{literal});

                        element.append( "<span class='closeon' title='Del'>X</span>" );
                        element.find(".closeon").click(function() {
                            var cnf = confirm('Etkinliği silmek istediğinize eminmisiniz?');
                            if(cnf)
                            {
                                /**
                                 *console.log($(this).siblings('div.fc-content').children('span.fc-id').html());
                                 **/
                                $.post( "ajax.php?islem=TakvimdenSil", { ids : $(this).siblings('div.fc-content').children('span.fc-id').html() } )
                                        .done(function( data ){
                                            //console.log(data);return;
                                            //$('#calendar').fullCalendar('removeEvents',event._id);
                                            if(data)
                                            {
                                                $.alert({
                                                    title: 'Takvim Silme işlemi',
                                                    content: 'Takvim silme işlemi başarılı!',
                                                    confirmButton: 'Tamam',
                                                    confirmButtonClass: 'btn-info',
                                                    animation: 'bottom',
                                                    icon: 'fa fa-check',
                                                    backgroundDismiss: false
                                                });
                                                $('#calendar').fullCalendar('removeEvents',event._id);
                                            } else {
                                                $.alert({
                                                    title: 'Takvim Silme işlemi',
                                                    content: 'Takvim silme işleminde bir sorun oluştu!',
                                                    confirmButton: 'Tamam',
                                                    confirmButtonClass: 'btn-info',
                                                    animation: 'bottom',
                                                    icon: 'fa fa-check',
                                                    backgroundDismiss: false
                                                });
                                            }
                                        });
                                return false;
                            }
                            return false;
                        });

                    },
                    eventClick: function(event){
                        //console.log('aktif seçildi');
                        $.post( "ajax.php?islem=takvimDetayOku", { ids : event.ids } )
                                .done(function(data){
                                    var pars    =   JSON.parse(data);
                                    $('#takvimOkuBaslik').html(pars[0].baslik);
                                    $('div#takvimdetayoku').html(pars[0].detay);
                                    $('.callout p:last-child').html(pars[0].yazar);
                                });
                        //$('.modal-footer').append('<a href="javascript:void(0)" class="btn btn-warning duzenle">Düzenle</a>');
                        $('#takvimDetayOku').modal('show');
                    }
                });
            }
        }

        return {
            init: function(){
                calendar();
            }
        }
    }();
    fullCalendar.init();
});

Yukarıdaki kodumuz ile takvim listemizi alıyoruz, listeliyoruz ay,gün,hafta arası geçiş yapıp liste alabiliyor, tarih tıklaması yaparak yeni bir ekleme yapabiliyoruz.
Üzerinde eksikler mevcut, bariz şekilde ne nerede kullanıyor belli ama isteyen olursa eksik kısımları ile beraber atacağım. Alt kısımda örnek olarak liste çekme kodunuda paylaşacağım

$data = array();
    //$data[] = array('title'=>'Vivamus non','start'=>'2016-01-29 03:00','end'=>'2016-01-29 04:00','className'=>'red');
    $list   =   $db->query("SELECT * FROM calendar WHERE type='krea' AND del=0");
    //print_r($list);exit;
    foreach ($list as $takvim) {
        //echo $endTime;exit;
            $color = "blue";
            if(is_null($takvim['tarih_bitis']))
            {
                //echo "<pre>";
                $endTimeAdd    =  strtotime("+120 minutes", strtotime($takvim['tarih']));
                $endTime   =  date('Y-m-d H:i:s',$endTimeAdd);
            } else {
                $endTime   =  $takvim['tarih_bitis'];
            }
            //$data[] = array('title'=>$takvim['baslik'],'start'=>$takvim['tarih'],'end'=>$endTime);
            $data[] = array('ids'=>$takvim['id'],'title'=>$takvim['baslik'].' '.$takvim['detay'],'start'=>$takvim['tarih'],'end'=>$endTime,'className'=>$color,'user_id'=>$takvim['user_id']);
    }
    //$data = array(array('title'=>'Business Lunch','start'=>'2017-05-03T13:00:00','constraint'=>'businessHours'),array('title'=>'Meeting','start'=>'2017-05-13T11:00:00','constraint'=>'availableForMeeting','color'=>'#257e4a'),array('start'=>'2017-05-06','end'=>'2017-05-08','overlap'=>false,'rendering'=>'background','color'=>'#ff9f89'));
    echo json_encode($data);

Kodları istediğiniz şekilde düzenleyebilir, geliştirebilir bu konu altındada paylaşabilirsiniz. Jquery takvim işlemleri ile ilgili aklınıza takılan veya anlamadığınız yerleri sorarsanız elimden geldiğince aktarmaya çalışırım.