Version: 1.1 | 2.0 |

Calendar

in namespace DotVVM.BusinessPack.Controls

Renders a Calendar control which lets the user to select a date.

Properties

Name Type Description Notes Default Value
ActiveDate DateTime?
attribute
inner element
static value
bindable
default
Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
DataSource IEnumerable<Object>
attribute
inner element
static value
bindable
default
DayDecorators List<Decorator>
attribute
inner element
static value
bindable
default
DayHeaderTemplate ITemplate
attribute
inner element
static value
bindable
default
DayTemplate ITemplate
attribute
inner element
static value
bindable
default
FirstDayOfWeek DayOfWeek?
attribute
inner element
static value
bindable
default
FooterTemplate ITemplate
attribute
inner element
static value
bindable
default
HeaderTemplate ITemplate
attribute
inner element
static value
bindable
default
ItemDateBinding IValueBinding<DateTime>
attribute
inner element
static value
bindable
default
MonthDecorators List<Decorator>
attribute
inner element
static value
bindable
default
MonthTemplate ITemplate
attribute
inner element
static value
bindable
default
ViewMode CalendarViewMode
attribute
inner element
static value
bindable
default
Month
Visible Boolean
attribute
inner element
static value
bindable
default
WeekNumberMode WeekNumberMode
attribute
inner element
static value
bindable
default
Disabled
YearDecorators List<Decorator>
attribute
inner element
static value
bindable
default
YearTemplate ITemplate
attribute
inner element
static value
bindable
default

Events

Name Type Description

Usage & Scenarios

Renders a Gregorian-style calendar control which lets the user to select a date, time or date and time values.

HTML Rendered by the Control

Sample 1: Basic Usage

The SelectedDate property represents a DateTime value with a date selected in the control.

<bp:Calendar SelectedDate="{value: SelectedDate}" />

<p>Selected date: <dot:Literal Text="{value: SelectedDate}" FormatString="g" /></p>
using System;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Calendar.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedDate { get; set; } = DateTime.Now;
    }
}

Sample 2: Selection Bounds

You can use the MinDate and MaxDate properties to specify the minimum and maximum values for the selection.

<bp:Calendar SelectedDate="{value: SelectedDate}"
             MinDate="{value: MinimumDate}"
             MaxDate="{value: MaximumDate}" />

<p>Selected date: <dot:Literal Text="{value: SelectedDate}" FormatString="g" /></p>
using System;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Calendar.sample2
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedDate { get; set; } = DateTime.Now;
        public DateTime MinimumDate { get; set; } = DateTime.Now.AddDays(-5);
        public DateTime MaximumDate { get; set; } = DateTime.Now.AddDays(5);
    }
}

Sample 3: Modes

You can use the Mode property to determine whether you want to select Date, Time or DateTime (a combination of date and time).

Even if you are in the Time mode, the control still requires the SelectedDate property to be bound to a property of DateTime type.

<bp:Calendar SelectedDate="{value: SelectedDate}"
             Mode="Date" />

<bp:Calendar SelectedDate="{value: SelectedTime}"
             Mode="Time" />

<bp:Calendar SelectedDate="{value: SelectedDateTime}"
             Mode="DateTime" />
using System;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Calendar.sample3
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedDate { get; set; } = DateTime.Now;
        public DateTime SelectedTime { get; set; } = DateTime.Now;
        public DateTime SelectedDateTime { get; set; } = DateTime.Now;
    }
}

Sample 4: Restrictions

If you require more granular control over what dates can be selected, you can use the Restrictions property. We currently support the following types of restrictions:

  • DayOfWeekRestriction - Allows to disable selection of a specific day of week. You can also specify the time interval you need to disable using the StartTime and EndTime properties.
  • DateRangeRestriction - Allows to disable a secific range of dates (one day, one month, etc.). You just need to set the StartDate and EndDate properties.

Restrictions can be combined with MinDate and MaxDate properties and are verified both on client-side and server-side.

<bp:Calendar SelectedDate="{value: SelectedDate}"
             Restrictions="{value: Restrictions}" />
using System;
using DotVVM.BusinessPack.Controls;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Calendar.sample4
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedDate { get; set; } = DateTime.Now;

        public List<CalendarRestrictionBase> Restrictions { get; set; } = new List<CalendarRestrictionBase>()
        {
            new DayOfWeekRestriction() { DayOfWeek = DayOfWeek.Saturday },
            new DayOfWeekRestriction() { DayOfWeek = DayOfWeek.Sunday },
            new DateRangeRestriction() { StartDate = DateTime.MinValue, EndDate = DateTime.Now }
        };
    }
}

Sample 5: SelectionCompleted Event

When the user completes or changes the selection, the SelectionCompleted event is triggered.

<bp:Calendar SelectedDate="{value: SelectedDate}"
             SelectionCompleted="{command: SelectionCompleted()}" />

<p>Date selection has changed {{value: DateSelectionsCount}} times.</p>
using System;
using DotVVM.Framework.ViewModel;

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Calendar.sample5
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime SelectedDate { get; set; } = DateTime.Now;
        public int DateSelectionsCount { get; set; }

        public void SelectionCompleted()
        {
            DateSelectionsCount++;
        }
    }
}

Suggestions


Help & Contribute

The documentation is maintained on GitHub.
We'll be happy if you edit the page and create a pull request.

Send message