Grial UI Kit - Calendar Control (2024.3 Update)

Greetings, awesome .NET mobile community!

We're thrilled to announce the latest update to the Grial UI Kit: 2024.3. This update brings you something we've needed countless times at UXDivers in our consultancy projects—a brand new control: the Calendar!

The Grial Calendar is designed to provide a beautiful and intuitive way to pick dates and date ranges. Whether you're scheduling appointments, booking events, or simply selecting dates, our new Calendar control has got you covered. It’s fully customizable and can be styled and configured in numerous ways.

‍

Note: some of you may have noticed that we're no longer using the month to name our Grial updates. From now on, we'll be using the YEAR.N naming convention.

‍

Grial Calendar

We're excited to introduce our new calendar control! It provides a multiple week / month visualization to display dates and date ranges, allowing users to select them with ease. True to Grial’s nature, we've made this control flexible enough to fit multiple scenarios from our templates, enabling beautiful visualizations that users can further customize.

Here are a few highlights:

• Flexible Styling: Use templates for the calendar, week headers, and days to achieve the look you want.
• CalendarDayLabel Control: Quickly tweak all day states (today, range end, range inside, radius, disabled, etc.) with ease.
• Easy Configuration: Set the first day of the week, disable specific dates, and set minimum and maximum dates. You can also adjust the calendar based on culture and more.
• Selection Support: Our calendar supports both single and range date selections.

You can read more in the docs.

And stay tuned for next releases… we have more exciting calendar-related UX patterns on the works 👩‍💻✨

If you have suggestions or feature requests don’t hesitate to contact us!

‍

Calendar pages

Since you’ll never see a naked control within Grial UI Kit,  let’s dive into three new pages that make excellent use of our calendar control.

First let’s look at the Booking Reservation Page. This page adheres to the standard layout for hotel and flight reservations, featuring a beautiful header, detailed reservation information, and a calendar for selecting dates.

‍

The second example is the Calendar Schedule Page. It combines the Grial Drawer control with the calendar, allowing you to create an elegant scheduler. Selected date events are displayed in full detail within the bottom layout, providing a comprehensive and user-friendly experience.

‍

And finally, check the Calendar Showcase Page if you want to explore different calendar configurations.

You’ll find templates and styles for the calendar in the App.xaml, optimized to work with all Grial Visual Themes. They are ready to customize to suit your needs 😎

‍

Stepper

Last April, we introduced the Registration Wizard—a great way to make the often tedious user registration process more engaging. It included a step counter, created with a simple ProgressBar and Grial XAML Expressions. After receiving valuable feedback from our users, we decided to develop a fully-featured Stepper control!

The Grial Stepper allows you to visually represent the different stages of a process, ensuring your users are always informed about what has happened and what is coming next. It's perfect for delivery apps, registration processes, multi-step configurations, onboarding experiences, and tracking users' learning progress.

Here are a few highlights:

• Supports Vertical and Horizontal Layouts: Adapt the stepper to fit your design needs.
• Total Style Flexibility: Customize with Current, Active, and Inactive templates, and adjust visual properties like strokes, line caps, and much, much more.
• Built-In Animations: Enjoy seamless animations with built-in duration and easing, we take care of animating your custom templates! It also integrates with Grial Progressive Animations smoothly.
• MVVM Ready: Define steps using the ItemsSource property, communicate with the ViewModel through CurrentItem and Progress, and use MoveNext/MovePrev commands to control actions directly via bindings.
• Commands & Events: Handle progress and step changes with ease using built-in commands and events.

You can read more in the docs.

‍

Stepper page

Let’s now explore the new pages using the Stepper, covering a few of the patterns mentioned earlier.

We've included a 3-step form:

‍

A 3-step app configuration:

‍

And a 4-step product shipping page:

‍

Each page showcases different uses and styles for the Stepper control, demonstrating its versatility. We hope you find this new control useful. Let us know if you have any feedback!

‍

More goodies

There’s one last page we are introducing today: the Survey Page.

This addition was requested by Mikkel Vede, who noticed the design in one of our marketing images and kindly asked if it was part of the product. The page was left in the marketing material by mistake, as it was never originally part of Grial. Thanks to Mikkel ❤️, we are now delivering the "lost" page and fixing that oversight.

‍

Bug fixes & improvements

And last but not least! Here’s a list of fixes included in this release:

• New property on VideoPlayer DontStopOtherMultimedia - when set to true the video player doesn't interfere with other videos or music being played in the device
• Fixed Video AutoPlay in iOS

‍

Hope you like the new content! Stay tuned for more 🙂

Let us know if you have any feedback, and follow us here. See you next month with a new update!

‍