CSS and Calendar Control

  • Thread starter Thread starter Miguel Dias Moura
  • Start date Start date
M

Miguel Dias Moura

Hello,

i am trying to create a .css file with several styles and apply them to the
calendar control so i can change the look of:

1. Text Type and Format (Bold, Underline, etc)
2. Background Color
3. Foreground Color
4. Border Tickness
5. Border Color
6. Calendar Size and each field size

I want to change this items to all the areas, such as Title, Day, Weekend,
etc.

Can you help me out?

Thank You,
Miguel
 
Have you even looked at the various properties that a Calendar control has?
I am guessing no because everything you want to do can be set by simply
setting the various properties.
 
Yes sure i looked and i allready did it. But i wanted to create CSS styles
so i could use, reuse it and change it in an easy way.
That's what i am looking for. To format the way i just did but using css

Thanks,
Miguel
 
Miguel, I don't think you are following me here....

You don't use CSS directly on a server control such as the calendar. You
use whatever properties it exposes such as "SelectedDateStyle". When the
control is rendered to the browser, those properties will be translated into
the appropriate CSS commands since all server controls render to the client
as HTML/JavaScript/CSS.

If you use the properties, there is no reason you wouldn't still be able to
use, reuse and change it easily.
 
Actually, Im afraid you are misunderstanding the issue.

The control may have nice little properties in it's own proprietary
method of setting styles, but most of the world currently uses style
sheets. Why reinvent what already exists? I think it is a fair
question to ask how to use a style sheet to render anything in the
..NET suite of components. Some of the items have this as a feature,
but others do not. It really should be available everywhere. Just
include a CSSStyle property on anything that the programmer has
control over (everything???)
 
I will try to explain better.

In my web sites i set all text style, background, and so one using style
sheets witch i save in a .css file or in a database.

What i would like to know if i could set a style like this:

Calendar {
dayFont:......
dayColor:....
dayBackgroundColor:...
weekendColor:....
...
}

Then i would apply this .css to the control.
This way, i could apply this .css to all the calendars i would create or
even change the .css file to change the look of the calendar control without
having to change the calendar control tag.

Are my ideas wrong?

Thanks,
Miguel
 
A calendar control is rendered as an HTML table with JavaScript attached via
onClick event handlers.

To attach an external .css file, simply do what you've always done for
styling tables. However, even if you don't set any properties in the
control, it does come down with inline style applied to it, so you may have
trouble overriding those with ones in the .css file.

Did you look at the fact that the control does have several "CSSClass"
properties for various aspects of its appearance. You could make a CSS
class and attach it to the various properties there.
 
No Dan, you are just making an issue where there is none.

The control is rendered to the client with styles attached. On the server,
where you design its rendered state, you use its ASP.NET properties. It is,
after all, an ASP:Calendar control to begin with. This is not re-inventing
anything. This is using the control the way it was designed to work in the
ASP.NET architecture.

Most of the controls that do have a Style property are the HTML controls.
The server controls tend to have a CSSClass property to attach a CSS Class,
so it really is available everywhere.

As for getting locked into the proprietary nature of setting styles, it's
hardly restrictive and as I just mentioned you can still apply a CSS Class.
 
Hi, i did see the several CSSClass properties applyied to the various
aspects of its appearance but somehow when i used it, some of the styles
didn't change...that's why i started looking for options....maybe i did
something wrong.

Another problem i am having is to populate the calendar with events taken
from an Access Database.
I found a quite short example in
http://www.macromedia.com/devnet/mx/dreamweaver/articles/aspnet_calendar_05.
html

However, this example is in C# and i am having trouble in changing it to VB
which is how my web page is done.

Did you ever did something like this?

Thanks,
Miguel
 
I have done this. Check out http://www.Pack96.org/calendar. This calendar
reads from a SQL Server (although it could do it from Access as well)
database and in the calendar's DayRender event, populates the currently
rendering cell with a label with data from the DataBase. Here's a code
snippet:


Private Sub calPackEvents_DayRender(ByVal sender As System.Object, ByVal
e As System.Web.UI.WebControls.DayRenderEventArgs) Handles
calPackEvents.DayRender
Dim objLabel As New Label()

Try
'Determine the date of the rendering cell
RenderingCellDate = e.Day.Date.ToShortDateString

'Loop through all the events in the DataSet
For i = 0 To ds.EventData.Rows.Count - 1

'Check the event to see if it is for the day being rendered
EventDate = CType(ds.EventData.Rows(i).Item("EventDate"),
Date).ToShortDateString

'If the database event date is a date that is in the future
(greater than the day being rendered), move on...
If EventDate > RenderingCellDate Then Exit For

'Is there an event for the day being rendered in the
calendar
If EventDate = RenderingCellDate Then
'Go write the event data into the label
Call WriteEvent(e, i, objLabel)
End If
Next i

'Add the label to the rendering cell
If Not IsNothing(objLabel) Then e.Cell.Controls.Add(objLabel)
Catch MyErr As Exception
lblError.Text = MyErr.Message
End Try
End Sub

Sub WriteEvent(ByVal RenderingCell As
System.Web.UI.WebControls.DayRenderEventArgs, ByVal i As Integer, ByVal
objLabel As Label)
'My database has a field to record if the event is "special" or not
so it can be rendered in a different color than ordinary events
'Special events would be things like holidays and no school days
'If it's a special day, change its background color
If ds.EventData.Rows(i).Item("Special") Then
RenderingCell.Cell.BackColor = Color.Wheat

'What is the event we're rendering? EventName is the field name in
my DataBase that represents the event name
EventName = ds.EventData.Rows(i).Item("EventName")

'Check to see if there are details for the event & set up its value
If Not IsDBNull(ds.EventData.Rows(i).Item("Details")) Then
EventDetails = ds.EventData.Rows(i).Item("Details")

'When there are details for an event, make the event clickable
and have a JavaScript popup window show the details
'There are event details, so get the JS popup window ready
Dim PopUpWindowTitle As String = Replace(EventName, "<BR>", " ")
Dim PopupLink As String = "javascript:PopUpWindow(" & Chr(34) &
EventDetails & Chr(34) & ")"

'Begin writing the event to the calendar
objLabel.Text += "<BR><A HREF='#' onClick='" & PopupLink & "'>"
& EventName & "</A><BR>"
Else
objLabel.Text += "<BR>" & EventName & "<BR>"
End If
End Sub


As far as the CSSClass property, my hunch is that the inline styles created
by the server side properties are overriding the CSSClass styles. Inline
style defiinitions always override page style and external styles.
 
Hi Miguel,

I can support the claim that sometimes the styles do not apply correctly on
the calendar control. I encountered the same problem with a project here.
The month name sometimes would not render with the class I had applied. It
is a strange problem and I did not find a solution...

Éric.
 
Back
Top