Asp.net Sayfalarımız İçin Etkinlik Takvimi

11
Mart
2013
Asp.net Sayfalarımız İçin Etkinlik Takvimi

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.

 

MAKALE-YORUMLAR

İsminiz
Yorumunuz


Doğrulama kodu

?

MAKALEYE YORUM YAZ

İsminiz
E-posta adresiniz
Yorumunuz
Doğrulama kodu ?

Copyright © 2006 - 2013  DESTEKYERI.COM

Embedded by  ® SANALOG Tüm Hakları Saklıdır . Yayınlanan yazıların izin alınmadan kopyalanması ve kullanılması  5846 sayılı Fikir ve Sanat Eserleri Yasasına göre suçtur. Makalelerin "alıntı" olduğunu belirterek yayınlayabilir ve kaynağı belirtmeniz önemlidir !!!