Full Calendar ile Takvim

calendar

Bir takvim uygulamasına ihtiyacım oldu.En çok kullanılan full calender eklentisini kullanarak izlediğim yollar şu şekilde öncelikle eklentiyi indiriyoruz http://fullcalendar.io/download/
ardından kullanacagım sayfada js css yollarını gösteriyoruz

Ben bootsrap ile kullandım siz istediğiniz şekilde kullanabilirsiniz.

<br>
&lt;link rel='stylesheet' href='fullcalendar/fullcalendar.css' /&gt;<br>
&lt;script src='lib/jquery.min.js'&gt;&lt;/script&gt;<br>
&lt;script src='lib/moment.min.js'&gt;&lt;/script&gt;<br>
&lt;script src='fullcalendar/fullcalendar.js'&gt;&lt;/script&gt;</p>
<p>&lt;div class="calendar"&gt;&lt;/div&gt;</p>
<p>

<br>
	$('#calendar').fullCalendar({<br>
			  header: {<br>
                left: "prev,today,next",<br>
                center: "title",<br>
                right: "month,agendaWeek,agendaDay"<br>
			},<br>
			eventClick:  function(event, jsEvent, view) {<br>
                            // gelen değerleri bootsrap modalina uyarlıyorum.<br>
				$('#modalTitle').html(event.title);<br>
				$('#modal-image').html(event.resim);<br>
				$('#modal-text').html(event.description);<br>
				$('#eventUrl').attr('href',event.url);<br>
				$('#fullCalModal').modal();</p>
<p>			},<br>
			editable: !1,<br>
			eventLimit: !0,<br>
			events: {<br>
				url: 'json.php' // etkinlikleri burdan çekiyorum<br>
			},<br>
		});<br>

Veritanından çektiğim sorgu ise ;

<br>
include('setting.php'); // veritabanı ayarları</p>
<p>        $takvim = $conn -&gt; query('SELECT * FROM tablo');<br>
        $datas = array();</p>
<p>	foreach($takvim as $row){<br>
	   $start = $row['tarih'];<br>
	   $eventsArray['id'] =  $row['id'];<br>
	   $eventsArray['title'] = $row['tile'];<br>
	   $eventsArray['start'] = $row['tarih']; // format - 2016-07-07<br>
	   $eventsArray['description'] = $row['aciklama'];<br>
	   $eventsArray['resim'] = '&lt;img src="/uploads/'.$row['resim'].'" /&gt;';<br>
	   $events[] = $eventsArray;<br>
	}</p>
<p>	echo json_encode($events);<br>

Demoya atamadım malasef çıktılar şu şu şekilde oluyor.

Adsız
A23dsız

Siz kendize göre düzenleyiniz.

https://yadi.sk/d/9XE3vIa3yzKovQ

1 Yorum

  1. merhabalar, anlattığınız örneğin kodlarını paylaşabilir misiniz?
    Bu örneğin üzerine event ekleme, silme, düzenleme özelliklerini de ekleyerek geliştirmek istiyorum.

    Yanıt
  2. Paylaşım için çok teşekkür ederim hocam. Benimde bu şekilde bir takvime ihtiyacım var. Paylaşırsanız sevinirim teşekkürler.

    Yanıt

alper için bir cevap yazın Cevabı iptal et