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 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.

Send message