Calendar with appointment and task

PubuduGayanPubuduGayan NZMember ✭✭✭

Does anyone know how to implement a calendar like this or any cross platform Calder?.

Best Answers

Answers

  • MarkVincentMarkVincent PHMember ✭✭✭

    I'm not sure if this extension has support that. https://github.com/XLabs/Xamarin-Forms-Labs/wiki/Calendar-Control. I'm not too sure if the specific date that as a itemtapped or something. If it has, then you can do that tasky thing. :)

  • PubuduGayanPubuduGayan NZMember ✭✭✭

    Hi @MarkVincent thanks for the answer , i am aware with the XLab but i am looking similar like what i attached but i don't know yet that we can customize the date, but if we can will mark as answer your one. any way thanks for the response.

  • JohnHardmanJohnHardman GBUniversity mod
    edited July 2016

    @PubuduGayan - A Xamarin.Forms Grid control would be the basis of it if you are building it from scratch, ensuring that all columns have the same width and all rows have the same height to make it look consistent.

    The question with any view like that is what information do you want to appear in each cell of the Grid? What happens if you have too much information to fit into the cell?

    I am curious as to what the colored blocks are that the bottom of many of the cells?

    Depending on what your precise requirements are, you could look at https://calendly.com/ . The paid-for version is IMHO far too expensive for integration into another product, but there is a free version. Check whether it could meet your requirements.

  • PubuduGayanPubuduGayan NZMember ✭✭✭

    @JohnHardman Thanks for your reference. check this

    https://play.google.com/store/apps/details?id=com.virblue.mystudylife&hl=en

    I am looking this calendar controller.

  • JohnHardmanJohnHardman GBUniversity mod

    If you are building your own, the Xamarin.Forms Grid would be the basis of it.

  • PubuduGayanPubuduGayan NZMember ✭✭✭

    @JohnHardman this will help me to start my own controller any way you earned the answer. thanks for your help.

  • JodeAndrewsJodeAndrews GBMember

    I went through an odd period of my development life getting really into making calendars in Xam.iOS and later on XF, the main reason being is that OOB calendar libraries draw you down one path and then the client will want it to look ever so slightly different and all of a sudden you're at a very dead end and getting a proper sweat on. It's very much worth spending the extra time making your own and it's actually quite straightforward and a lot of fun.

    John's idea is spot on.

    Programmatically create a grid with only 7 columns and an even split.

    Depending on the number of days in the month (use DateTime.DaysInMonth(..)) calculate and add your rows.

    In each of your cells add a 'day view'.

    The day view is just a boxview for the background, and a label over the top for the day, and in your case a grid at the bottom - be wary if those are the number of events as you'll spill over.

    Add a gesturerecognizer to the dayview to recognize a TapCommand, and in it's viewmodel handle if it's selected, I just send a message out when it's selected and let the other dayviews unselect themselves.

    I also change the boxview color to grey if the day falls into another month and ignore those tapcommands.

    Then create a stacklayout, add a month/year header, a day header, and your grid.

    Then depending on requirements either add to a scrollview with lots of other calendarviews for later months, or load the view as per the dropdown in your example- which is far easier than scrolling, although not as nice I might add :)

    I'm over simplifying this a bit I know, but I'm happy to go through it in detail or send me a link to a repo and I'll dump some code to get you started when I get chance.

  • PaulRiehlePaulRiehle USMember ✭✭

    @JohnHardman said:
    @PubuduGayan - Using the technique I described in my previous post, I produced these this week. The first is a typical left-to-right Gregorian calendar. The second is a right-to-left Hebrew calendar with added Gregorian dates. As soon as I find a couple of images of Arabic (Hijri) calendars I'll check it works correctly for Hijri too. As well as the arrow buttons, the month, year, and every cell on the grid are buttons. Pressing the month or year results in an action sheet appearing from which the user can jump quickly to another date. Pressing a cell on the grid results in a user-defined method being called.

    I might wrap these up as a component at a later date, but just wanted to share the images so that you can see it is possible using Xamarin.Forms .

    The one thing I haven't worked out yet, is how to get access to multiple calendars via System.Globalization.CultureInfo.OptionalCalendars on Android and iOS. Without that, combining multiple calendar variants requires extra effort (which is why the screenshots below, particularly the second one, are from Windows).

    That looks really nice. Did you ever get around to making a component or would be willing to provide the sourcecode?

  • JohnHardmanJohnHardman GBUniversity mod

    @PaulRiehle - Unfortunately, I haven't had time to separate out the code into a component. How far did you get following the guidance above?

  • PaulRiehlePaulRiehle USMember ✭✭

    @JohnHardman said:
    @PaulRiehle - Unfortunately, I haven't had time to separate out the code into a component. How far did you get following the guidance above?

    I'm currently in the research phase and haven't put any code down. There don't seem to be any calendar controls out there that do exactly what I want, so it was looking like I needed to start from scratch or from opensource code.

    The main feature I'm looking for is to be able to have a weekly or daily view that would include an hourly breakdown of appointments. To further explain, at the top of the control would be 9am, with hourly time dividers ending at 5pm at the bottom of the control. I figure I could accomplish this with dynamically sized buttons (based on the appointment length) within absolute layouts nested within a 1x7 grid.

    XLabs Calendar seemed to be my best option, but most of their implementation isn't cross-platform. The idea of making this control mostly from cross-platform code, using the method you described above combined with what I said seems very appealing. Do you think what I'm describing will work out with this method?

  • JohnHardmanJohnHardman GBUniversity mod

    @PaulRiehle - You'll probably want to use a N x 7 grid for weekly, rather than 1 x 7, but it could be made to work either way. Similarly, for daily, the grid won't be 1 x 7. Otherwise, yes.

  • PaulRiehlePaulRiehle USMember ✭✭

    @JohnHardman - What do you mean for N? Do you many N = number of hours in the day? If that's what you meant, I thought it would cause issues if I had an appointment between hours (ie. 1:30pm-2:30pm). Though I seem to remember reading that the child could go outside of it's parent view when using an absolute layout, I wasn't sure if that would complicate things.

  • JohnHardmanJohnHardman GBUniversity mod

    @PaulRiehle - If (for the daily one) you show a separator between hours, but want to be able to show appointments with finer granularity (e.g. every 15 minutes), then things get more complicated, particularly if you want to show items that can overlap with other items chronologically. AbsoluteLayout would be one way to do that, but other layout types could be used as well. If you don't need appointments at finer granularity than your separators, then the AbsoluteLayout could be unnecessary.

  • PaulRiehlePaulRiehle USMember ✭✭
    edited February 2017

    @JohnHardman,
    Yeah that's what I thought. And for sure if appointments overlapped it would be pretty difficult.

    Fortunately I discovered this control, which seems to do everything I want:
    http://mindfusion.eu/xamarin-calendar.html

    If things fall through and I end up coding from scratch, I will update this thread with my solution. Thanks for the words!

  • JohnHardmanJohnHardman GBUniversity mod

    @PaulRiehle - Does that component support all XF target platforms (well, Android, iOS and UWP at least)? And does it support international use, including Hebrew and Hijri? If so, I might switch to that - it's inexpensive enough to be cheaper than the cost of effort maintaining my own.

  • PaulRiehlePaulRiehle USMember ✭✭

    @JohnHardman said:
    @PaulRiehle - If (for the daily one) you show a separator between hours, but want to be able to show appointments with finer granularity (e.g. every 15 minutes), then things get more complicated, particularly if you want to show items that can overlap with other items chronologically. AbsoluteLayout would be one way to do that, but other layout types could be used as well. If you don't need appointments at finer granularity than your separators, then the AbsoluteLayout could be unnecessary.

    I believe they only support Android and iOS.

    I don't know how the hebrew or hijri calendar works, but they do have at least some amount of localization. You can view the settings documentation here:

    http://www.mindfusion.eu/onlinehelp/xamarin.calendar/T_MindFusion_Scheduling_LocalizationInfo_Members_0.htm

    I do know that out of the box, the demo recognizes the chinese language of my iPad and displays the labels in Chinese correctly. I don't know yet if it can do the Lunar Calendar, though. I'll look into it more when I can.

  • JohnHardmanJohnHardman GBUniversity mod

    @PaulRiehle - Many thanks. I've just sent the company an email to check on future availability for UWP, plus non-Gregorian calendars.

  • SivaiOSSivaiOS INMember ✭✭

    Hi ,

    I Am new to the Mobile Cross Platform Development......

    How to Access Default Calender(like Google Calculator for Android and default iOS Calender) for CrossPlatForm.

    Am Using MasterList view user click on calender open the default calender based on Android or iOS.How to implement these feature in CrossPlatform.

    Please Help us....Thanks in Advance.

Sign In or Register to comment.