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
property icon ActiveDate DateTime?
attribute
inner element
static value
bindable
default
property icon Attributes Dictionary<String,Object>
attribute
inner element
static value
bindable
default
property icon DataSource IEnumerable<Object>
attribute
inner element
static value
bindable
default
property icon DayDecorators List<Decorator>
attribute
inner element
static value
bindable
default
property icon DayHeaderTemplate ITemplate
attribute
inner element
static value
bindable
default
property icon DayTemplate ITemplate
attribute
inner element
static value
bindable
default
property icon FirstDayOfWeek DayOfWeek?
attribute
inner element
static value
bindable
default
property icon FooterTemplate ITemplate
attribute
inner element
static value
bindable
default
property icon HeaderTemplate ITemplate
attribute
inner element
static value
bindable
default
property icon ItemDateBinding IValueBinding<DateTime>
attribute
inner element
static value
bindable
default
property icon MonthDecorators List<Decorator>
attribute
inner element
static value
bindable
default
property icon MonthTemplate ITemplate
attribute
inner element
static value
bindable
default
property icon ViewMode CalendarViewMode
attribute
inner element
static value
bindable
default
Month
property icon Visible Boolean
attribute
inner element
static value
bindable
default
property icon WeekNumberMode WeekNumberMode
attribute
inner element
static value
bindable
default
Disabled
property icon YearDecorators List<Decorator>
attribute
inner element
static value
bindable
default
property icon 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 ActiveDate property represents a DateTime value with a date selected in the control.

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

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

namespace DotvvmWeb.Views.Docs.Controls.businesspack.Calendar.sample1
{
    public class ViewModel : DotvvmViewModelBase
    {
        public DateTime ActiveDate { get; set; } = DateTime.Now.AddDays(5);
    }
}

Sample 2: Views

You can use the View property to determine which of the calendars Month, Year or Decade will be displayed.

The default value is Month.

<bp:Calendar ActiveDate="{value: ActiveDate}"
             View="Month" />

<bp:Calendar ActiveDate="{value: ActiveDate}"
             View="Year" />

<bp:Calendar ActiveDate="{value: ActiveDate}"
             View="Decade" />
using System;
using DotVVM.Framework.ViewModel;

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

Sample 3: Header and Footer template

You can create custom header and footer content with HeaderTemplate and FooterTemplate property.

<bp:Calendar ActiveDate="{value: ActiveDate}" >
    <HeaderTemplate>
        <p>Custom calendar</p>
    </HeaderTemplate>
    <FooterTemplate>
        <bp:Button Text="Select next day from today" 
                   Click="{staticCommand: ActiveDate = NextDay}"/>
    </FooterTemplate>
</bp:Calendar>
using System;
using DotVVM.Framework.ViewModel;

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

        public DateTime NextDay { get; set; } = DateTime.Now.AddDays(1);
    }
}

Suggestions

Help & Contribute

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

Edit on Github

Send message