Pages

Subscribe:

Ads 468x60px

18 November 2008

CALENDAR EVENT ASP.NET 2.0

Iseng - iseng posting coz udah lama tidak merasakan posting di blog.. :). Kali ini aku mencoba membuat calender yang fully html sih, script tentu saja aku download. Untuk sourcenya aku dapatkan di sini.

Sebenarnya ada banyak contoh yang bisa memanfaatkan component kalender di .NET 2.0, tapi sebagian besar pakai C#, karena aku kurang pengalaman di C#, maka aku pakai saja yang html (Looping untuk buat tabel), beserta connect programmingnya dengan VB.NET.Data event berasal dari database, kebetulan aku pakai Oracle. Untuk koneksi sendiri saya lebih suka ODBC dari Windows XP. Dari contoh, akan tampil semua bulan yang ada pada tahun ini, disini saya customize cuma untuk bulan sekarang. Setelah selesai, kita bikin Class dengan berikut ini. Dalam class ini akan mempunyai satu fungsi untuk mendapatkan Event pada hari tersebut, hari diambil dari parameter pada halaman utama. selain itu, class ini juga digunakan untuk memformat tanggal yang digunakan.




 


Imports Microsoft.VisualBasic

Imports System.Data.Odbc

Imports System.Data



Public Class EventsDAO

' member declaration

Private connString As String

Private dbConn As OdbcConnection



Public Sub New()

'connString =
System.Web.Configuration.WebConfigurationManager.ConnectionStrings("Conn").ToString()

connString = "DSN=DSNName;UID=userDSN;PWD=Password"

dbConn = New OdbcConnection(connString)

dbConn.Open()

End Sub



Public Sub CloseConnection()

dbConn.Close()

End Sub



Public Function GetEvent(ByVal currentDate As Integer, ByVal month As Integer,
ByVal year As Integer) As DataTable

'Dim cmd As OdbcCommand

Dim selectCmd As String

'Dim oAdapter As New OdbcDataReader

Dim ds As New DataSet



'selectCmd = "Select * From Events Where @date1 >= dateFrom and @date2 <= dateTo"

selectCmd = "Select * From CORP_NEWS WHERE TO_CHAR(TANGGAL,'DD/MM/YY')='" &
Right("0" & currentDate, 2) & "/" & Right("0" & month, 2) & "/" & Right("0" &
year, 2) & "' AND STAT='1' "

'response.write(selectCmd)

Dim da As New OdbcDataAdapter(selectCmd, dbConn)



'Dim paramDate1 As New OdbcParameter("@date1", ProperDateFormat(currentDate,
month, year))

'Dim paramDate2 As New OdbcParameter("@date2", ProperDateFormat(currentDate,
month, year))



'cmd.Parameters.Add(paramDate1)

'cmd.Parameters.Add(paramDate2)



'OdbcParameter.SelectCommand = cmd

da.Fill(ds)



Return ds.Tables(0)

End Function



Private Function ProperDateFormat(ByVal d As Integer, ByVal m As Integer, ByVal
y As Integer) As String

Try

Dim months() As String = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct", "Nov", "Dec"}

Return d.ToString() + "/" + months(m - 1) + "/" + y.ToString()

Catch ex As Exception

Return ""

End Try

End Function

End Class





Untuk CSS, saya masih pakai Originalnya, seperti ini :



 


/* Begin kalender */



.subHeader

{

text-transform: capitalize;

color: #6fa1d9;

font-family: Arial, Verdana;

font-weight: normal;

font-size: 1.1em;

background-color: #f5f5f5;

vertical-align: top;

text-align: right;

/* page-break-after: auto; */

}



.calendarFrame

{

border-right: #add8e6 thin solid;

border-top: #add8e6 thin solid;

border-left: #add8e6 thin solid;

border-bottom: #add8e6 thin solid;

}



.calendarMonthYear

{

font-size: 0.8em;

color: #ffffff;

font-family: Arial;

font-weight: bold;

background-color: #335ea8;

letter-spacing: 1px;

}



.calendarDay

{

font-size: 0.8em;

color: #ffffff;

font-family: Arial;

font-weight: bold;

background-color: #6fa1d9;

}



.hasEvent

{

font-size: 0.8em;

color: #ffffff;

font-family: Verdana, Arial;

background-position: center center;

background-image: url(event.gif);

background-repeat: no-repeat;

text-align: center;

width: 23px;

height: 25px;

cursor: pointer;

vertical-align: middle;

}



.hasNoEvent

{

font-size: 0.8em;

font-family: Verdana, Arial;

text-align: center;

width: 23px;

height: 25px;

}



/* End of Kalender */




Dan yang terakhir adalah Halaman utama untuk menampilkan Kalender, di Design, kita cukup tambahkan Label dengan id berikut .
dan untuk Behind Codenya adalah :



Imports System.Data.OleDb

Imports System.Data

Partial Class Calendar

Inherits System.Web.UI.Page



Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs)
Handles Me.Load

If Not IsPostBack Then

Dim rightNow As DateTime = DateTime.Now

'Response.Write(rightNow.Month.ToString)

Dim bulan As Integer = rightNow.Month

'Response.Write(x)

' Generates report for current year

lblCalendar.Text = "<table width='300px'>"

Dim horizontalRepeat As Integer = 3 ' number of months in horizontal direction

Dim month As Integer



'ori For month = 1 To 12

For month = bulan To bulan

If (month Mod horizontalRepeat = 1) Then

lblCalendar.Text += "<tr valign='top'>"

End If



lblCalendar.Text += "<td>" + generateCalendar(month, 2008) + "</td>"



If (month Mod horizontalRepeat = 0) Then

lblCalendar.Text += "</tr>"

End If

Next



lblCalendar.Text += "</table>"

End If

End Sub

Private Function generateCalendar(ByVal month As Integer, ByVal year As Integer)
As String

' generates the calendar as per the booking status

Dim wholeCalendar(5, 6) As Integer

Dim weeks As Integer = 0

Dim day As String = ""

Dim tmpDate As DateTime

Dim myDate As Integer



For myDate = 1 To 31

Try

tmpDate = New DateTime(year, month, myDate)

If (day = "Saturday") Then

weeks += 1

End If

day = tmpDate.DayOfWeek.ToString()



If (day = "Sunday") Then

'If (wholeCalendar(weeks, 0) > 0) Then weeks += 1

wholeCalendar(weeks, 0) = myDate

ElseIf (day = "Monday") Then

'If (wholeCalendar(weeks, 1) > 0) Then weeks += 1

wholeCalendar(weeks, 1) = myDate

ElseIf (day = "Tuesday") Then

'If (wholeCalendar(weeks, 2) > 0) Then weeks += 1

wholeCalendar(weeks, 2) = myDate

ElseIf (day = "Wednesday") Then

'If (wholeCalendar(weeks, 3) > 0) Then weeks += 1

wholeCalendar(weeks, 3) = myDate

ElseIf (day = "Thursday") Then

'If (wholeCalendar(weeks, 4) > 0) Then weeks += 1

wholeCalendar(weeks, 4) = myDate

ElseIf (day = "Friday") Then

'If (wholeCalendar(weeks, 5) > 0) Then weeks += 1

wholeCalendar(weeks, 5) = myDate

ElseIf (day = "Saturday") Then

'If (wholeCalendar(weeks, 6) > 0) Then weeks += 1

wholeCalendar(weeks, 6) = myDate

End If

Catch ex As Exception

Exit For

End Try

Next



' Generates the HTML calendar

Dim htmlCalendar As String = ""

Dim objEventsDAO As New EventsDAO()

Dim dt As DataTable

Dim i As Integer, j As Integer



htmlCalendar += "<table class='calendarFrame' cellspacing=0>"

htmlCalendar += "<tr class='calendarMonthYear' style='text-align: center;'><td
colspan='7'>" + getMonthName(month) + " " + year.ToString() + "</td></tr>"

htmlCalendar += "<tr class='calendarDay' style='text-align: center;'>
<td>Sun</td> <td>Mon</td> <td>Tue</td> <td>Wed</td> <td>Thu</td> <td>Fri</td>
<td>Sat</td> </tr>"



For i = 0 To 5

htmlCalendar += "<tr>"



For j = 0 To 6

If wholeCalendar(i, j) > 0 Then

dt = objEventsDAO.GetEvent(wholeCalendar(i, j), month, year)

If (dt.Rows.Count > 0) Then

Dim toolTip As String = ""

'Dim toolTip As String = dt.Rows(0)("Judul").ToString() & dt.Rows.Count.ToString

'while dt.Rows.re

Dim baris As Integer = dt.Rows.Count

Dim satu As Integer = 1

While satu <= baris

toolTip = toolTip & " " & satu & ". " & dt.Rows(satu - 1)("Judul").ToString()

satu = satu + 1

End While

htmlCalendar += "<td class='hasEvent' title=""" + toolTip + """><a href=xxx.aspx?tgl="
& wholeCalendar(i, j) & "&bulan=" & month & "&tahun=" & year & ">" +
wholeCalendar(i, j).ToString() + "</a></td>"

Else

htmlCalendar += "<td class='hasNoEvent'>" + wholeCalendar(i, j).ToString() +
"</td>"

End If

Else

htmlCalendar += "<td class='hasNoEvent'>&nbsp;</td>"

End If

Next



htmlCalendar += "</tr>"

Next

htmlCalendar += "</table>"



' Close database connection

objEventsDAO.CloseConnection()



' returns the generated HTML calendar

Return htmlCalendar



End Function



Private Function getMonthName(ByVal month As Integer) As String

Dim months() As String = {"Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul",
"Aug", "Sep", "Oct", "Nov", "Dec"}



Return months(month - 1)

End Function

End Class





Gimana, cukup mudah sebenarnya, silahkan mencoba.. :)



Up | Down | Top | Bottom