A Time-Of-Day Picker control

Sample Image - TimeFrame.jpg

Introduction

This control uses double buffering to provide an interface that allows a user to choose time frames throughout the day. The control is modeled after a control that originally showed up in Windows NT, which allowed a user to specify valid login hours to the domain.

About the control

The control has a property called TimeFrames that returns a 3 dimensional array of TimeSpan objects.

public TimeSpan[][][] TimeFrames

The first dimension is the day
The second dimension is a specific contiguous time span
The third dimension will only have two elements, the first is the start time and the second is the end time

As suggested in the Eric White & Chris Garrett text "GDI+ Programming: Creating Custom Controls Using C#", all sections of the screen are split up into seperate objects. Since all major areas of the control can be hot tracked or selected, there is a base concept of a TimeFrameObject, which all sub areas inherit from. This base class includes members for the bounds of the object and whether the object is hot tracked or selected. This really cuts down on the code. For example, this method figures out where on the screen a particular point is and figures out which TimeFrameObject contains the point.

private TimeFrameObject GetTimeFrameObject( MouseEventArgs e )
{
    TimeFrameObject tfo = null;
    if( Grid.Contains( e.X, e.Y ) )
    {
        tfo = CellMatrix[ (int)( ( e.Y - Header ) / y_grid_inc), 
                (int)( ( e.X - LeftMargin ) / x_grid_inc) ];
    }
    else if( ( e.X > Grid.X ) && ( e.X < 
            ( Grid.X + Grid.Width ) ) && ( e.Y < Grid.Y ) )
    {
        tfo = (TimeFrameObject)
            TimeSlots[ (int)( ( e.X - LeftMargin ) / x_grid_inc) ];
    }
    else if( ( e.X < Grid.X ) && 
            ( e.Y < ( Grid.Y + Grid.Height ) ) && ( e.Y > Grid.Y ) )
    {
        tfo = (_Day)Days[ (int)( ( e.Y - Header ) / y_grid_inc) ];
    }
    else if( TopLeft.Contains( e.X, e.Y ) )
    {
        tfo = TopLeft;
    }
    return tfo;
}

This reduces OnMouseDown to:

protected override void OnMouseDown( MouseEventArgs e )
{
    TimeFrameObject tfo = GetTimeFrameObject( e );
    if( tfo != null )
    {
        if( e.Button == MouseButtons.Left )
        {
            tfo.Selected = ! tfo.Selected;
            tfoLastSelected = tfo;
            this.Invalidate( true );
        }
    }
}

That's all

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here

About the Author

ClearlyDotNet

Web Developer

United States

Member

Article Top

Poor

Excellent

Add a reason or comment to your vote: x
Votes of 3 or less require a comment

Comments and Discussions

You must Sign In to use this message board. (secure sign-in)

Search this forum
	Profile popups Noise Layout Per page

Small Update

Angelo Cresta

21:28 9 Jul '09

I've added 3 methods, a serializer to store data into a string, a deserializer and the cleaner:

            public static string SerializeTimeFrames(TimeSpan[][][] TimeFrames)
            {
                string result = "";
 
                int Counter = 0;
                foreach (TimeSpan[][] tsa in TimeFrames)
                {
                    result += Counter;
                    foreach (TimeSpan[] ts in tsa)
                    {
                        result += "," + ts[0].ToString() + " " + ts[1].ToString();
                    }
                    result += "#";
                    ++Counter;
                }
                return result;
            }
 
           public static TimeSpan[][][] DeSerializeTimeFrames(string SerializedTimeFrames)
            {
                TimeSpan[][][] tss = new TimeSpan[8][][];
 
                for (int i = 0; i < tss.Length; i++)
                {
                    tss[i] = new TimeSpan[48][];
                    for (int j = 0; j < tss[i].Length; j++)
                    {
                        tss[i][j] = new TimeSpan[2];
                    }
                }
 
                int DayCounter = 0;
                string[] Days = Microsoft.VisualBasic.Strings.Split(SerializedTimeFrames, "#", -1, Microsoft.VisualBasic.CompareMethod.Text);
 
                for (DayCounter = 0; DayCounter < Days.Length - 1; DayCounter++)
                {
                    int IntCounter = 0;
                    string[] Intervals = Microsoft.VisualBasic.Strings.Split(Days[DayCounter], ",", -1, Microsoft.VisualBasic.CompareMethod.Text);
 
                    for (IntCounter = 1; IntCounter < Intervals.Length; IntCounter++)
                    {
                        int SpanCounter = 0;
                        String[] Span = Microsoft.VisualBasic.Strings.Split(Intervals[IntCounter], " ", -1, Microsoft.VisualBasic.CompareMethod.Text);
 
                        for (SpanCounter = 0; SpanCounter < 2; SpanCounter++)
                        {
                            try
                            {
                                tss[DayCounter][IntCounter][SpanCounter] = TimeSpan.Parse(Span[SpanCounter]);
                            }
                            catch (Exception ex)
                            {
                            }
                        }
 
                    }
 
                }
 
                return tss;
            }
            public static void ClearContent()
            {
                //clear all
                for (int r = 0; r < c_NumDays; r++)
                {
                    for (int c = 0; c < c_NumTimeIntervals; c++)
                    {
                        CellMatrix[r, c].Selected = false;
                    }
                }
 
            }

you can check a derived control here:
http://www.componentfactory.com/forums/viewtopic.php?f=7&t=2328[^]

Hope this helps
Angel

Add a vertical or horizontal scrollbar

Judyll

4:24 11 Nov '07

hello, is it possible to add a vertical or horizontal scrollbars in the controls in such case where your time labels are from 12:00AM to 11:59PM with only 1 hour interval and maintaining the size of the form?
Sign In·View Thread·Permalink

Sample code VB.NET?

pclady

18:00 28 Nov '06

This is great. I've been looking for this everywhere. Anyone have sample code for implementing this in VB.NET? I use free MS VB 2005 Express and don't have access to C#. Thanks! pclady
Sign In·View Thread·Permalink

read graphical frame

crisyuri

12:47 2 Feb '06

I am using trying usercontrol but necessary to take off one it doubts? I obtained to record the periodos in Bank SQL, but it would like to know as I make to place the information deals of the SQL in the graphical frame?
Sign In·View Thread·Permalink

Load Data Failed? Anyone can help me?

xiaohu

17:47 15 Jan '06

public bool[] GetValue()
{
try
{
bool[] data = new bool[NumDays * NumTimeIntervals];
for (int i = 0; i < NumDays; i++)
{
for (int j = 0; j < NumTimeIntervals; j++)
{
data[i * NumDays + j] = this[i, j];
}
}
return data;
}
catch (Exception ex)
{
Trace.WriteLine(ex.StackTrace);
return null;
}
}

public void SetValue(bool[] data)
{
try
{
for (int i = 0; i < NumDays; i++)
{
for (int j = 0; j < NumTimeIntervals; j++)
{
this[i, j] = data[i * NumDays + j];
}
}
}
catch (Exception ex)
{
Trace.WriteLine(ex.StackTrace);
}
}

private bool this[int i, int j]
{
get
{
return CellMatrix[i, j].Selected;
}
set
{
CellMatrix[i, j].Selected = value;
}
}

Loading Data

dietsche

9:45 9 Apr '05

I added this code to the public TimeSpan[][][] TimeFrames Property. It allows me to load a saved array of TimeSpan objects into the control.

			set

			{

				int day=0;

				

				foreach(TimeSpan[][] tss in value)

				{

					foreach(TimeSpan[] ts in tss)

					{

						long t_inc = c_ts.Ticks / (long)NumTimeIntervals;

						TimeSpan tsi = new TimeSpan( t_inc );

 

						long start = ts[0].Ticks / tsi.Ticks;

						long end = ts[1].Ticks / tsi.Ticks;

 

						for(long time = start;time

How to migrate to WebForm?

XTV

22:27 27 Sep '04

Hi; your control it's very usefull, and I need something similar for use in the web. How can I migrate this control to WebForms? Thanks
Sign In·View Thread·Permalink

It's genious!

elmotheelk

1:33 17 Aug '04

Just wanted to say THANKS!! It's great. the interface, the code, etc. Wow! And it;s totally free! Thanks again.
Sign In·View Thread·Permalink

Two TImeFrame

Jianhua Cao

9:56 11 Aug '04

How can create two timeframe in the same form? One is 7 days, the other is 1 day. Thanks
Sign In·View Thread·Permalink

Re: Two TImeFrame

Jianhua

10:04 11 Aug '04

Well, I can create two TimeFrame in one form, however, when I work on the first one, the same thing happened to the second one. It is very good control, we use it for many places, thanks for your help.
Sign In·View Thread·Permalink

Re: Two TImeFrame

fatcat1111

13:00 17 Feb '05

I must say that I agree with the original poster. How can the start and end times of the period not be DateTimes?
Sign In·View Thread·Permalink

Re: Two TImeFrame

tony161616

0:38 12 Feb '06

The reason for this is that the CellMatrix[,] member is static. So all objects of TimeFrame class uses the same data structure to store data.
Sign In·View Thread·Permalink

Did anyone manage to solve loading dataset into the control

chrisybhot1

22:56 28 Apr '04

And how would i go about adding another column of weeks of the year. i.e Monday ] 22/01/2004 Tuesday ] 23/01/2004 cheers chris
Sign In·View Thread·Permalink

getting this party started

kvc

3:36 25 Jul '03

Hi, I've been looking for something like this for two uses: setting appointment start/end time and floor schedule so what I need is: (meaning how do I do this... 1 - can I change times displayed. start at a reasonable time say 8am? 2 - how do I retrieve the start/end time/day 3 - I figure I'll add some kind of datepicker up top for the date. 4 - thanks
Sign In·View Thread·Permalink

Re: getting this party started

amun100

23:37 26 Oct '09

hi did u manage to find a solution to this? TIA Andrew
Sign In·View Thread·Permalink

TimeSpans vs. DateTime

Heath Stewart

8:12 20 Jan '03

Why did you use `TimeSpan`s? For instance, your third dimension is the start and end times. Your first dimension is the day. The only place that makes sense to use a `TimeSpan` is your second dimension, but you can obtain this easily by subtracting the start `DateTime` from the end `DateTime`. "Well, I wouldn't say I've been missing it, Bob." - Peter Gibbons
Sign In·View Thread·Permalink	5.00/5 (1 vote)

Re: TimeSpans vs. DateTime

ClearlyDotNet

7:40 30 Jan '03

"The DateTime and TimeSpan value types differ in that a DateTime represents an instant in time, whereas a TimeSpan represents a time interval." The control specifies time intervals which is why TimeSpan was used. -- "If you're object doesn't encapsulate complexity, then why would I use it?"
Sign In·View Thread·Permalink	2.00/5 (1 vote)

Nice!

Tim Hodgson

4:33 16 Jan '03

Exactly what I was looking for.
Sign In·View Thread·Permalink

Cool Control . but how to load data ?

scryer21

0:03 17 Dec '02

Hi , any idea how i can do things like loading of data into the control ? for example how do we go about getting it done with a datatable of data ? And any chance besides having the Day of the Week by the side , any idea how to extend it to be displaying maybe the a person's name ? [so it will be like timetable of different people for a single day] Thanks its an awesome control !
Sign In·View Thread·Permalink

Re: Cool Control . but how to load data ?

ClearlyDotNet

7:44 30 Jan '03

I picked the simplest way to get the data out of the control because I new that once anyone wanted to use it, they might want it differently than what I originally coded. Another idea for importing/exporting would be a (typed) dataset. If anyone/everyone likes this idea, then I can add it. Any other ideas?

Changing the rows to people's names instead of weekdays would chnage the logic of the control. In essence, it would be a different control but would look very much like the original one.

-- "If you're object doesn't encapsulate complexity, then why would I use it?"

Re: Cool Control . but how to load data ?

xavier21

7:02 3 Feb '03

Importing / exporting via a typed dataset will be a great addition to it. I am still struggling to create the triple timespan array needed to get it to display some information but the time picking interface still rocks =);)
Sign In·View Thread·Permalink

but how to load data ?

maartensmolders

1:21 7 Apr '03

Yes I'm having the same problem... Does anyone can give me ANY example of how to import data into the control? thnks, Martin
Sign In·View Thread·Permalink	3.50/5 (2 votes)

Re: but how to load data ?

dl4gbe

6:05 29 Nov '04

Hallo, Ich changed the code as follows. I added one small function: public bool SetTime(int intDay,int intColumn) { CellMatrix[ intDay, intColumn ].Selected = true ; return true; } Hope this helps Chris Vietiane, Laos (PDR)
Sign In·View Thread·Permalink

Re: Cool Control . but how to load data ?

cmpenney

6:09 13 Oct '08

Does anyone have an example how to do this yet? In my case the data is saved in the registry so I can set each day's info directly however I just can't seem to get it working.
Sign In·View Thread·Permalink