Display Image on certain days

17 posts, 1 answers
  1. Froggy
    Froggy avatar
    16 posts
    Member since:
    Apr 2012

    Posted 07 May 2012 Link to this post

    Hi,

    How should it work to display Images on certain days?.  So far I have this but it displays the image on ever day:

                        <telerikInput:RadCalendar.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="5">
                                    <Image Source="/Images/Add.png" Width="24" Height="24" Name="calIcon" />
                                    <TextBlock Text="{Binding DetailText}" FontSize="7" MaxHeight="25" VerticalAlignment="Top" Margin="0,-2,0,0" />
                                    <TextBlock Text="{Binding Text}" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
                                </Grid>
                            </DataTemplate>
                        </telerikInput:RadCalendar.ItemTemplate>

    The Text displays correctly on the days I want using the standard Appointment approach, but how to control the image??  Its not really clear how this is working.

    Thanks!
  2. Valentin.Stoychev
    Admin
    Valentin.Stoychev avatar
    2198 posts

    Posted 08 May 2012 Link to this post

    Hello,

    you need to use a TemplateSelector for this. Please check this help article:
    http://www.telerik.com/help/windows-phone/radcalendar-features-specialdays.html

    Regards,
    Valentin.Stoychev
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  3. DevCraft banner
  4. Froggy
    Froggy avatar
    16 posts
    Member since:
    Apr 2012

    Posted 08 May 2012 Link to this post

    Hi,

    Well, I'm still stuck....  The example just states to highlight weekends.  I need to highlight dates that have actual data.  Appointments that I have made.  Its not at all clear how this should work. I don't find a working way to check if there is actual data. Do you have some kind of working example for this?

    thanks!
  5. Kiril Stanoev
    Admin
    Kiril Stanoev avatar
    1512 posts

    Posted 09 May 2012 Link to this post

    Hello Steven,

    Thank you for contacting us. I've prepared a small project which demonstrates how to use a DataTemplateSelector in the context of RadCalendar. Please take a look at it and let me know if you find anything unclear or you need further explanation. I'd be glad to assist you.

    Kind regards,
    Kiril Stanoev
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  6. Froggy
    Froggy avatar
    16 posts
    Member since:
    Apr 2012

    Posted 09 May 2012 Link to this post

    Hi,

    Ok.... its getting clearer, but say I have some data like:

                radCalendar.AppointmentSource = new SampleAppointmentSource();


           public class SampleAppointmentSource : AppointmentSource
            {
                public SampleAppointmentSource()
                {
                }
                public override void FetchData(DateTime startDate, DateTime endDate)
                {
                    AllAppointments.Clear();
                    DateTime start = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 1);
                    DateTime end = new DateTime(DateTime.Today.Year, DateTime.Today.Month, 2);
                    IList<ViewEntry> list = DBHelper.GetReadOnlyEntrysForDate(startDate, endDate);
                    for (int i = 0; i < list.Count(); i++)
                    {
                        ViewEntry e = list.ElementAt(i);
                        
                            AllAppointments.Add(new CalendarAppointment()
                            {
                                StartDate = e.StartDate.AddMinutes(1),
                                EndDate = e.StartDate.AddMinutes(1),
                                Subject = e.GetText();
                            });
                    }

    So I am adding my own entries from the database.  And these are displayed on the given days on the calendar.

    Also for these appointments I want to display a little icon as well as the text.So I need my template.

    In the template version supplied I don't quite see how to access the appointment information.

    If I query  CalendarButtonContentInfo info = item as CalendarButtonContentInfo;

    The appointments in "info" are null, there are no appointments to query, kind of odd as they are displayed.  

    info.Appointments.Count  is always 0.

    Should the appointments be available in the CalendarButtonContentInfo ??  Perhaps I messed it up there?

    Its like I need to display only on those days based upon my database entries, at the moment I don't see how to bind the template to the data.  The only solution i have at the moment is making query in the database in the Template, but this rather silly as I have to make a ton of queries every time the template is called (31 times!).

    I'm sure i messed up somewhere...

    Thanks!
    S.


  7. Froggy
    Froggy avatar
    16 posts
    Member since:
    Apr 2012

    Posted 10 May 2012 Link to this post

    aggh, no answer, in the meantime I hacked it like this (not really a good solution):

                            AllAppointments.Add(new CalendarAppointment()
                            {
                                StartDate = e.StartDate.AddMinutes(1),
                                EndDate = e.StartDate.AddMinutes(1),
                                Subject = "Images/frog_sad.png" // FAKE IT to get the image and no text
                            });


                        <telerikInput:RadCalendar.ItemTemplate>
                            <DataTemplate>
                                <Grid Margin="5">
                                    <Image Source="{Binding DetailText}" Width="24" Height="24" Visibility="Visible" Name="calIcon" />
                                    <TextBlock Text="{Binding Text}" FontSize="17" VerticalAlignment="Bottom" HorizontalAlignment="Left" />
                                </Grid>
                            </DataTemplate>
                        </telerikInput:RadCalendar.ItemTemplate>


    Now i got my icon there... OK, no text now :-(
  8. Answer
    Todor
    Admin
    Todor avatar
    778 posts

    Posted 14 May 2012 Link to this post

    Hello Steven,

    This is in fact an issue in the current version of RadCalendar and we will try to fix it for our future releases. For now, you can use your AppointmentSource in the TemplateSelector and check if there are any appointments for the current date (info.Date) and based on that you can return the relevant template.

    I have updated your account with some telerik points for reporting this issue. Let me know if I can assist you furtherer.

    Kind regards,
    Todor
    the Telerik team

    Explore the entire Telerik portfolio by downloading the Ultimate Collection trial package. Get it now >>

  9. Froggy
    Froggy avatar
    16 posts
    Member since:
    Apr 2012

    Posted 14 May 2012 Link to this post

    Hi,

    Thanks for your reply.  My hack solution works for me at the moment.  I leave the text off and just display this icon.

    thanks!
    Steven.
  10. Gilbert
    Gilbert avatar
    13 posts
    Member since:
    Oct 2013

    Posted 16 Apr 2014 Link to this post

    Is there an updated way to do this?

    I would not only like to display an icon but also change the background color of a day based on a custom property.
  11. Todor
    Admin
    Todor avatar
    778 posts

    Posted 16 Apr 2014 Link to this post

    Hello,

    As promised, the reported issue was resolved. Now the appointments info is available when the ItemTemplateSelector is applied and you can access it through the Appointments property of the CalendarButtonContentInfo.

    Let us know if you need additional assistance.

    Regards,
    Todor
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  12. Gilbert
    Gilbert avatar
    13 posts
    Member since:
    Oct 2013

    Posted 22 Apr 2014 in reply to Todor Link to this post

    Thanks for the reply, but can you provide a quick sample. I've tried looking through the resources without any success.
  13. Todor
    Admin
    Todor avatar
    778 posts

    Posted 23 Apr 2014 Link to this post

    Hello Gilberto,

    I have attached a sample application, which uses a custom template for the dates that contain appointments. In our online documentation you can see more about the appointments and the special templates.

    I hope this information helps.

    Regards,
    Todor
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  14. Gilbert
    Gilbert avatar
    13 posts
    Member since:
    Oct 2013

    Posted 24 Apr 2014 in reply to Todor Link to this post

    Thanks Todor for the reply, this has been helpful.

    One more question...How can I query a custom IAppointment class property on my SelectTemplate Class. Please see the ".Result == true" line of the code below.

    Result is a Boolean custom property in my SampleAppointment Class. 

    public override DataTemplate SelectTemplate(object item, DependencyObject container)
    {
        CalendarButtonContentInfo info = item as CalendarButtonContentInfo;
     
        CalendarButton button = container as CalendarButton;
     
        if (!button.IsFromCurrentView)
        {
            return null;
        }
     
        if (info.Date == null)
        {
            return null;
        }
     
        if (info.Appointments != null && info.Appointments.Count() > 0 && info.Appointments.ElementAt(0).Result == true)
        {
            return this.GreenTemplateIcon;
        }
     
        return base.SelectTemplate(item, container);
     
     
     
     
    }
  15. Todor
    Admin
    Todor avatar
    778 posts

    Posted 24 Apr 2014 Link to this post

    Hi Gilberto,

    You simply need to cast the appointment element to your custom type. For example, if your appointments are of type SampleAppointment and this type contains the property Result, here's how you can check its value:

    if (info.Appointments != null && info.Appointments.Count() > 0)
    {
        SampleAppointment firstAppointment = (SampleAppointment)info.Appointments.ElementAt(0);
        if(firstAppointment.Result == true)
        {
            return this.GreenTemplateIcon;
        }
     
    }

    Regards,
    Todor
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  16. Gilbert
    Gilbert avatar
    13 posts
    Member since:
    Oct 2013

    Posted 24 Apr 2014 in reply to Todor Link to this post

    Yes! thank you. this is what I needed.
  17. Wella
    Wella avatar
    2 posts
    Member since:
    Jul 2015

    Posted 16 Jul 2015 Link to this post

    Thank you I was looking for solution for this problem a long time. Thanks again for sharing it here. Now I have perfect calendar

     

    _______________________

    code promo la redoute

  18. Wella
    Wella avatar
    2 posts
    Member since:
    Jul 2015

    Posted 16 Jul 2015 Link to this post

    Thank you for sharing it here. Now I have perfect calendar.

     

    ________________________

    code promo la redoute

Back to Top
DevCraft banner