Yeni bir makale ile herkese merhaba .
Başlıktan da anlaşıldığı üzere sizlerle bu yazımızda asp.net sayfalarında kullanabileceğimiz bir etkinlik takvimi yapacağız. Fakat asp.net ile birlikte gelen calendar kontrolünü kullanmayacağız. Jquery ile hazırlanan FullCalendar eklentisini kullanacağız. (http://arshaw.com/fullcalendar/). Bu takvime asp.net – c# kodlarımızla etkinlikleri yerleştireceğiz. Ayrıca etkinliklere tıkladığımızda fancybox eklentisi ile etkinlik detayının lightbox ile gösterilmesini sağlayacağız. (http://fancybox.net/)
Bu açıklamalardan sonra kodlarımıza başlayabiliriz.
Öncelikle app_data/ klasörüne etkinlik_db.mdb ismiyle bir veritabanı dosyası oluşturalım. Veritabnımızı açıp içerisine “EtkinlikTablosu” ismiyle bir tablo tasarlayalım ve şu şekilde alanları oluşturalım. (Alanları oluşturduktan sonra tablo içerisine birkaç örnek veri girebilirsiniz)
Şimdi bir asp.net sayfası oluşturup etkinlik.aspx ismini veriyoruz ve dosyamızı şu şekilde düzenliyoruz.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="etkinlik.aspx.cs" Inherits="etkinlik" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<%--jquery dosyaları--%>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
<%--takvim eklentisi--%>
<script src="scripts/fullcalendar-1.5.3/fullcalendar/fullcalendar.min.js"></script>
<link href="scripts/fullcalendar-1.5.3/fullcalendar/fullcalendar.css" rel="stylesheet" />
<link href="scripts/fullcalendar-1.5.3/fullcalendar/fullcalendar.print.css" rel="stylesheet" />
<%--fancybox eklentisi--%>
<script src="scripts/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.js"></script>
<link href="scripts/jquery.fancybox-1.3.4/fancybox/jquery.fancybox-1.3.4.css" rel="stylesheet" />
</head>
<body>
<form id="form1" runat="server">
<%--etkinlik takvimi burada gösterilecek--%>
<div id="div_etk_takv"></div>
<div id="etk_detay_div" style="display: none;">
<%--lightbox görünmesi için bu link kullanılıyor (bu link görünmeyecek)--%>
<a href="#detay_icerik"></a>
<%--etkinliğin detayı burada gösterilecek--%>
<div id="detay_icerik"></div>
</div>
</form>
</body>
</html>
Şimdi cs sayfamıza geçelim ve tablomuzdaki etkinlikleri çekelim. Çekilen etkinlikleri de takvime yerleştirelim.
using System;
using System.Data.OleDb;
using System.Text;
public partial class etkinlik : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//veritabanı bağlantı kodlarmız
OleDbConnection con = new OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=|DataDirectory|etkinlik_db.mdb;");
con.Open();
OleDbCommand com = new OleDbCommand("SELECT * FROM EtkinlikTablosu", con);
StringBuilder sb = new StringBuilder();
//jquery kodlarımız yazıyoruz. (çıktı için html kaynağına bakınız)
sb.Append(@"
$(document).ready(function () {
//burada takvimi oluşturan kodlar başlıyor
$('#div_etk_takv').fullCalendar({
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: false,//takvimi editable olarak kullanmak için burayı true yapabilirsiniz.
events: [
//şimdi etkinlikleri yazdırıyoruz.
");
using (OleDbDataReader odr = com.ExecuteReader())
{
while (odr.Read())
{
//etkinlikler yazdırılıyor.
sb.AppendFormat(@"
{{
id: {0},
title: '{1}',
start: new Date('{2}'),
end: new Date('{3}'),
detay: '{4}',
allDay: false
}},",
odr["Id"].ToString(),
odr["Baslik"].ToString().Replace("'", "''"),
Convert.ToDateTime(odr["Baslangic"]).ToString("MM/dd/yyyy HH:mm:ss").Replace(".", "/"),
Convert.ToDateTime(odr["Bitis"]).ToString("MM/dd/yyyy HH:mm:ss").Replace(".", "/"),
odr["Detay"].ToString().Replace("'", "\\'").Replace(Environment.NewLine, "\\" + Environment.NewLine));
}
}
con.Close();
if (sb.ToString().Substring(sb.Length - 1) == ",")
sb.Remove(sb.Length - 1, 1);
sb.Append(@"
],
//etkinliklerden birisine tıklayınca bu olay çalışır
eventClick: function (event) {
$('#detay_icerik').html(event.detay);
$('#etk_detay_div > a:first').click();
}
});
//lightbox görüntüleme için fancybox kullanıyoruz
$('#etk_detay_div > a:first').fancybox();
});
");
//scripti sayfaya import ediyoruz.
ClientScript.RegisterClientScriptBlock(this.GetType(), "takvim", sb.ToString(), true);
}
}
Artık sayfamız çalıştırılmaya hazır. Çalıştırdığımız zaman şu şekilde bir ekran görüntüsü ile karşılaşacağız.
Burada kullandığımız fullCalendar eklentisinin ekstra özellikleri mevcuttur. örneğin etkinlikleri taşıyabiliyorsunuz. Veya tıkladığınız bir yere dinamik olarak etkinlik ekleyebiliyorsunuz. Eklentinin kendi web sitesini inceleyerek bu konuda bilgiler bulabilirsiniz. Örnek dosyayı buradan indirebilirsiniz.
Umarım faydalı olmuştur görüşmek dileğiyle.