WPF Scheduler control

Working in a personal WPF MVVM project, I needed a scheduler to manage some appointments. I was looking for something similar to google calendar, which one I think is quite good.

After some hours searching and trying everything I found on internet, I didn’t find anything good. I didn’t like them or were comercial products so… why not do it myself? Some hours later I had implemented something which I was very happy, therefore here it is available for everyone. It is a scheduler similar to Google calendar, with three views: Month, Week and Day.

Some screenshots:

day view
Month view:
month view
And week view:

week view

To use it we only have to add a reference to the DLL and the in our XAML:

xmlns:my="clr-namespace:WpfScheduler;assembly=WpfScheduler"

After that we have to add the control:

<my:Scheduler
            Grid.Row="1"
            HorizontalAlignment="Stretch" Name="scheduler1" VerticalAlignment="Stretch" Loaded="scheduler1_Loaded"
            SelectedDate="2013-05-27"
            StartJourney="9:00"
            EndJourney="19:00"
            OnEventDoubleClick="scheduler1_OnEventDoubleClick"
            OnScheduleDoubleClick="scheduler1_OnScheduleDoubleClick"
            Mode="Week">
            <my:Scheduler.Events>
                <my:Event Subject="Dad birthday" AllDay="True" Start="2013-05-29" End="2013-05-29" Color="Aqua"></my:Event>
                <my:Event Subject="Dev meeting" Start="2013-05-29 09:30:00" End="2013-05-29 11:30:00" Color="LightGreen"></my:Event>
                <my:Event Subject="Dev meeting" Start="2013-05-30 12:00:00" End="2013-05-30 12:30:00" Color="LightGreen"></my:Event>
                <my:Event Subject="Mike Holidays" Start="2013-05-27" End="2013-06-09" Color="LightSalmon"></my:Event>
                <my:Event Subject="Lunch with David" Start="2013-05-28 12:00:00" End="2013-05-28 13:00:00" Color="Violet"></my:Event>
                <my:Event Subject="Internet line installation" Start="2013-05-29 10:00:00" End="2013-05-29 14:00:00" Color="Yellow"></my:Event>
            </my:Scheduler.Events>
        </my:Scheduler>

As you can see it is possible to define static events but it is possible to add them dinamically, of course. The control has these properties, methods and events:

Properties

  • SelectedDate (DateTime): Current date showed in the calendar.
  • StartJourney (TimeSpan): Use in the day view to change the style of the hours before this value.
  • EndJourney (TimeSpan): Similar to StartJourney.
  • Events (ObservableCollection<Event>): List of events in the calendar.
  • Mode (Enum): Use to configuratethe view. The options are Day, Week or Month.

Methods

  • AddEvent(Event e): Add an event to the control.
  • DeleteEvent(Guid id): Remove the event with the Id received as parameter.
  • NextPage: Go to the next page. It will be the next day, week or month, depending of the current mode.
  • PrevPage: Similar to NextPage.

Events

  • OnEventDoubleClick: Double click on an event. Is received the event as parameter.
  • OnScheduleDoubleClick: Double click on an empty zone of the scheduler. Is received the associated date as parameter.

You can download the files at the end of the post.

65 comentarios en “WPF Scheduler control

  1. Hi Oscar, that’s quiet a great scheduler. trying to find my way around it but still cant. (new to wpf). Could you kindly provide a tutorial please?

  2. The control works fine for me.

    But i got a question. I added some events per code to the control(dayview)
    now thats what i want to do.

    I want to double-click on the event and then it should open a new window.
    And in the window there are textboxes which should display the clicked-event’s start and end time.

    Is this even possible to do ?

    Sorry for bad English

    KoaleBeer

    • Hi,

      Take a look to the «WpfScheduler Tester 1.0». In «MainWindow.xaml.cs» you will see the event handler «scheduler1_OnEventDoubleClick». There you have the event as a parameter. You just have to open a new window and populate your textboxes with the event data.

      Also, you can take a look to the «scheduler1_OnScheduleDoubleClick» event handler. With that event you can create new events in the same way.

  3. Excellent control Oscar. I have been tasked with developing a WPF scheduler for my employer. I am using your control as the base. With a little tweaking, it will be perfect for our needs. You have saved me loads of programming hours. My thanks to you.

  4. really nice !

    i didn’t looked in the source yet , but it seem that
    this is exactly what need !!!

    and with a little tweaking and styling and it would be just perfect

    really appreciate

    Thanks a lot

    btw, why not put this on codeplex/sourceforge , so the control can be shared/enhaced ?

  5. After looking for many hours for a decent free scheduler control, I finally found this.

    Excellent job Oscar, many thanks for your effort and for sharing it with us.

  6. Hi,

    Thank you ever so much for posting this elegant way of creating a scheduling calendar. I have been looking a long time for a version similar to the one created by yourself; so thank you for your solution.

    However, I do have a question. I have created a window to allow users to add a new event, suggested by your previous answer. I am using SQL entity framework to store the data.
    How am I able to refresh the calendar event to display a new record that has been added?

    Many thanks

    • Hi, I am glad that is useful. The truth is there is nothing similar in internet.

      About your question, in theory you just need to call this method «AddEvent(Event e)»

      • Thank you for your reply.

        you are quite right, there is nothing; unless you pay a hefty fee for a similar version to the one you so kindly created.

        Well, within my window (when you double click on a day) I have a button that I bind to my ViewModel to add. It adds it to the database, but it doesn’t seem to display within the calendar event at all.

        Kind regards.

  7. This a great application you have put together! I have ran your application and it seems ideal for what I need it for, so thank you!
    I have a question however. I opened the Test 1.1.1 and noticed that within your «NewEvent.xaml.cs» you need to call the property «public Event Event{}» to be able to add the event within the mainWindow; «scheduler1.Events.Add(window.Event);». Is there an alternative way of achieving this as I want to use the MVVM design pattern and only bind my ViewModel to the view rather then calling the method like you have. Thanks!

      • Hi,
        I tried creating a ViewModel which I bind to the NewEvent view, and I am able to save a new event to a database in the backend. However, due to the property which is in the NewEvent view “public Event Event{}” the calander doesn’t acknowledge a new event has been added, even though one has been saved within the database. Therefore, I am having problems being able to accomplish this. Any methods around this from the solution you provided?
        Thanks! 🙂

          • Thank you Oscar!
            Ive modified the code you provided from the MVVM solution and it works a real treat! Thankyou for putting the time into it. Just a quick mention, you could include WPFToolKit for the colourpicker and the DateTimePicker, so it would allow the user to pick a specific time.
            Again, thankyou! 🙂

            • Hi James, I am glad to heard that. Could you share the modifications that you have done? And about the controls, I was using WPFToolKit in my original code but I removed it in this example to do it more simple.

  8. Hi Oscar!
    You have done a great job.
    I searched for many hours for a good scheduler control and you made it !
    Thanks you very much for sharing it 🙂

    I see that you have worked on an MVVM solution with James, it’s a good idea and I’m interested by your final product. Is still available ? 🙂

    Best wishes !

    Gavin

  9. Hi..
    That’s a great scheduler. but still not worked for me.
    mostly give the error of scheduler not found in xmlns:my or something like that
    i want to show only day view not month & week..
    if u mail me the working code of it.
    Thanks

  10. Hello Oscar,
    this project is very nice!
    But i could need some help. I would know if it is possible to get the «label» row-postion when clicking on the schedule?
    Because, when clicking in an empty position, i want to get the time on wich position it was klicked.

    Thank you!

    • Hi,

      I am not sure what do you need. Yo can use the «OnScheduleDoubleClick» event to manage when you click in an empty position. And you will get the date/time as a parameter.

      • Hi,

        thank you for your fast answer.
        I will try to specify my problem.

        At first. I’m yousing your MVVM project which works very fine. So now,when I doubleclick on schedule this method is called:
        private void WeekScheduler_OnScheduleDoubleClick(object sender, DateTime date)
        { //do something}

        But then, date only contains the «clicked» Date, but not time…For example: {23.06.2014 00:00:00}

        • Hello Oscar.

          is it possible to get the time back too,or to get the row back?

          private void Canvas_MouseDown(object sender, MouseButtonEventArgs e)
          {
          if (e.ClickCount >= 2)
          {
          var test = (Canvas) sender;
          int dayoffset = Convert.ToInt32(((Canvas)sender).Name.Replace(«column», «»)) – 1;

          OnScheduleDoubleClick(sender, new DateTime(FirstDay.Year, FirstDay.Month, FirstDay.Day).AddDays(dayoffset));

          }
          }

          Would be nice to get something like this:
          {23.06.2014 15:15:00}

  11. Hello Oscar,
    congratulations for this project.
    But I have noticed that in day mode the next end previous buttons aren’t working properly. By default the day of week is Monday. But when I hit ‘next’
    button the program jumps to next Sunday and when I hit the ‘prev’ button the program jumps to next Friday.
    Please, can you fix this problem?
    Thanks in advance

  12. Oscar thanks for your reply .
    i have one more problem
    how i get event starting time on
    scheduler1_OnScheduleDoubleClick

    suppose calender mode is set to day and i double click on it to add event
    then how i got the starting time of that event.

  13. Thanks for fast reply…
    and in day mode if i double click on calender after 11 am no event window not popup
    but before 11:00 am its working fine…
    any solution 🙂

  14. Hola Oscar!
    This is exactly what I was looking for. Thank you for developing that.
    Nevertheless I have a «small» problem…
    I’ve downloaded WpfScheduler Tester 1.1.1 and also the DLL.
    I’ve added the reference and tried to compile, but still get the error that «my» was not found. How can I fix this problem to use your library?

    It confuses me also a bit because, I can start the project, I see the calendar, I can use the buttons but no event is showing. ( maybe because of the error..)

    Please help me 🙂

    VS2013, Framework 4.5, Win 7
    Hope to hear from you..
    Thx.

  15. Hello, I have a problem that I don’t understand why it happens. When I compile show this error:
    la etiqueta ‘Scheduler’ no existe en el espacio de nombres XML ‘clr-namespace:WpfScheduler;assembly=WpfScheduler’.

    Thank you

  16. Hola Oscar,
    Me sale un error de compilación que no entiendo por qué ocurre:
    la etiqueta ‘Scheduler’ no existe en el espacio de nombres XML ‘clr-namespace:WpfScheduler;assembly=WpfScheduler’.
    Muchas gracias

  17. Hello Sir, the scheduler was too good, but one thing, i want get TimeSpan for selected rows time. for example if click the time span 11 on 26-02-2015 it should be selected 26-02-2015 11:00:00AM like this sir. Here where i get the time sir, pls reply me as soon as possible sir, am waiting for your reply.

  18. Hello sir the application was so good. But one thing i need, how to get the selected rows time, i got only the data only like 27-02-2015 12:00:00 only.
    but i want the time sir, reply me as soon as possible.

  19. Hi, first off all let me thank you for this component which is really what we needed with some small changes. However I have come across few things which I’m not sure how to solve.
    I have discovered a problem when switching between modes (day, week). When I’m in week view and the displayed week is starting monday 11th May, selected day is today (Sunday 17th May) I switch to Day view and Monday 11th May is shown.
    Now I want to move forward (or backward). When I click next there is Monday 18th May.
    Which is correct because my selected day was 17th May. But before that there was wrongly displayed the 11th May Monday.
    I have made some small change in ModeDay_Click in my project:

    Private Sub btnModeDay_Click(sender As Object, e As System.Windows.RoutedEventArgs) Handles btnModeDay.Click
    scheduler1.Mode = Mode.Day

    Dim selecteDate As Date = scheduler1.SelectedDate
    While selecteDate.DayOfWeek DayOfWeek.Monday
    selecteDate = selecteDate.AddDays(-1)
    End While
    scheduler1.SelectedDate = selecteDate
    End Sub

    Problem is that this is not a clear solution. And also it’s not working when I want to use DatePicker with the scheduler. Because when 17th was selected then I move to day mode the 11th has to be selected which is something my users will definitelly not like.
    I would be wery gratefull if you could provide me with a solution for this. Thank you.

    • Hi, I was hoping to receive some response. Could you let me know if you will look into it? I was trying to solve it, but at last I didn’t want to mess it up even more. Thank you very much for whichever answer.

  20. Hi,

    Great control, I’m using it in my project and found a little bug 😉
    In the week view when you are adding an event on Sunday it will never show.

    WeekScheduler.xaml.cs -> PaintAllEvents -> if (numColumn >= 0 && numColumn < 7)

    Should be <= 7

    Cheers!

  21. Great Control. But why is the Grid.RowSpan of the column Canvas for each Collumn only 22 in the Week-Scheduler. And then that:
    double oneHourHeight = sp.ActualHeight / 22;

    I was really wondering about that. Implementet Drag and Drop on the Canvas and got really confused when i hit Hour 23/24 and nothing happend 😛

    greetings

  22. Good morning, there’s a mistake I do not understand.
    If I upload an appointment that starts for example from January 1st to February 20th it works.
    If I upload an appointment that starts, for example, from 1 January to 20 March in the month in the middle of February, no appointment is uploaded.
    Thank you.

    Greetings.

  23. Oscar,
    it’s really an amazing implementation! thank you!
    I’m using the MVVM version as I need to add it to a whole project developed with MVVMLight.
    I have one question on the all day events as I’ve noticed that if all the ones I add appear on top.
    As the DB I’m using has data since the last 20 years there are a lot of dates that miss the hour info… so they should appear as «all day» but if I have 20 meetings like this the area below become not visible.
    I was trying to make it in a way that a Scroll bar will appear if the number of all day meetings is above a certain number… but I’m miserably failing.

    I know I’m asking you a lot but do you think it could be possible for you to look into it? 🙂

Responder a Massimo Savazzi Cancelar la respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.