Download Free Demos

Blocking, Marking and Highlighting Dates

Blocking and Marking Dates

Scheduler has inner object TimeSpans that contains the collection of DHXBlockTime and DHXMarkTime objects defining date range(s) that must be blocked and marked.

sched.TimeSpans.Add(new DHXBlockTime()
{
      Day = DayOfWeek.Sunday // blocks each Sunday
});
 
sched.TimeSpans.Add(new DHXMarkTime()
{
      Day = DayOfWeek.Saturday, // marks each Saturday with the 'green_section' style
      CssClass = "green_section"
});

where

  • CssClass is the name of a class defined on the client side:
// css
<style>
  .green_section {
    background-color: #77ff77;
    opacity: 0.25;
  }
</style>

There are 2 different ways to specify members for the DHXBlockTime and DHXMarkTime objects (see members details in the tables below):

Day, Zones and Start_date, End_date members are used in pairs to set the blocking interval and can't be mixed and used in any other variations. For example, you can't specify Zones, Start_date or Day, Start_date, End_date at the same time.

1 . a period between specific dates

// different days
sched.TimeSpans.Add(new DHXBlockTime()
{
    StartDate = new DateTime(2011, 9, 14),
    EndDate = new DateTime(2011, 9, 17)
});
// or the same day
sched.TimeSpans.Add(new DHXBlockTime()
{
    StartDate = new DateTime(2011, 9, 14, 8, 0, 0),
    EndDate = new DateTime(2011, 9, 14, 15, 0, 0)
});

2 . specific period(s) of a day

sched.TimeSpans.Add(new DHXBlockTime()
{
    Day = DayOfWeek.Tuesday,
    // if Zones isn't specified the entire day is blocked
    Zones = new List<Zone>() { new Zone { Start = 0, End = 15 * 60 } }
});

The remaining members can be used in both variants.

DHTMLX.Scheduler.DHXBlockTime

The DHXBlockTime object can contain the following members:

  • StartDate

DataType: DateTime

Description: The limitation start date

Example:

Creating events from May 3,2012 till the EndDate value

new DateTime(2012,5,3)
  • EndDate

DataType: DateTime

Description: The Date object that sets the limitation end date

Example:

Denies creating events from the StartDate value till September 3, 2012

new DateTime(2012,9,3)
  • Day

DataType: DayOfWeek

Description: A day that should be limited

Examples:

Limits each Monday

Day = DayOfWeek.Monday
  • Zones

DataType: List

Description: The period in minutes that should be limited

Example:

2 limitation blocks: 00:00-05:00 and 10:00-15:00

Zones = new List() {
new Zone { Start = 0, End = 5 * 60 },
new Zone { Start = 10 * 60, End = 15 * 60 } }
  • HTML

DataType: string

Description: The content that will be added to the blocked range

Example:

Draws a DIV with the specified text over the blocked range

<b>Blocked</b>
  • Invert

DataType: boolean

Description: Specifies whether time zones (set by Zones ) must be inverted. Default value - false

Examples:

Results in 2 limitation blocks: 00:00-08:00 and 20:00-00:00

Zones = new List<Zone>() {
  new Zone { Start = 8*60, End = 20*60 }
}, Invert = true

Results in 2 limitation blocks: 00:00-08:00 and 20:00-00:00

Zones = new List<Zone>() {
  new Zone { Start = 0, End = 8*60 },
  new Zone { Start = 20*60, End = 24*60 }
}, Invert = false
  • Sections

DataType: List

Description: Allows you to block date(s) just for specific items of the views. By the way, the specified date(s) will be blocked just in the related view(s)

Example:

Blocks dates just for the item with the id=5 in the Unit view and items with the id=2, id=3 in the Timeline view

Sections = new List<Section>() {
    new Section("unit", new string[]{"5"}),
    new Section("timeline", new string[]{"2","3"})
}

DHTMLX.Scheduler.DHXMarkTime

The DHXMarkTime object can contain the following members:

  • StartDate

DataType: DateTime

Description: The marking start date

Example:

Marks events from May 3, 2012 till the EndDate value:

new DateTime(2012,5,3)
  • EndDate

DataType: DateTime

Description: The marking end date

Examples:

Marks creating events from the StartDate value till September 3, 2012:

new DateTime(2012,9,3)
  • Unordered List ItemDay

DataType: DayOfWeek

Description: A day that should be marked

Example:

Marks each Monday

Day = DayOfWeek.Monday
  • Zones

DataType: List

Description: The period in minutes that should be marked

Examples:

2 marked blocks: 00:00-05:00 and 10:00-15:00:

Zones = new List<Zone>() {
    new Zone { Start = 0, End = 5 * 60 },
    new Zone { Start = 10 * 60, End = 15 * 60 }
}
  • SpanType

DataType: DHXTimeSpan.Type

Description: Defines whether time spans should be just marked or both marked and blocked.
If the parameter isn't specified, events will be just marked.

Example:

Events will be marked and blocked:

SpanType= DHXTimeSpan.Type.BlockEvents
  • CssClass

DataType: string

Description: The name of a CSS class

Example:

Draws a DIV and applies the 'gray_section' CSS class to it:

CssClass = 'gray_section'
  • HTML

DataType: string

Description: The content that will be added to the marked range

Example:

Draws a DIV with the specified text over the marked range:

HTML='<b>Blocked</b>'
  • Invert

DataType: boolean

Description: Specifies whether time zones (set by Zones) must be inverted. Default value - false

Examples:

Results in 2 limitation blocks: 00:00-08:00 and 20:00-00:00:

Zones = new List<Zone>() {
  new Zone { Start = 8*60, End = 20*60 }
}, Invert = true

Results in 2 limitation blocks: 00:00-08:00 and 20:00-00:00:

Zones = new List<Zone>() {
  new Zone { Start = 0, End = 8*60 },
  new Zone { Start = 20*60, End = 24*60 }
}, Invert = false
  • Sections

DataType: List

Description: Allows you to mark date(s) just for specific items of the views. By the way, the specified date(s) will be marked just in the related view(s)

Example:

Marks dates just for the item with the id=5 in the Unit view and items with the id=2, id=3 in the Timeline view:

Sections = new List<Section>() {
  new Section("unit", new string[]{"5"}),
  new Section("timeline", new string[]{"2","3"})
}

Pointer Highlighting

Pointer highlighting is an ability of the scheduler to highlight the area under the pointer.

Task Manager Calendar

The ability is provided by the DHXScheduler.Highlighter class which has the following properties:

  • CreateOnClick - (boolean) if the property is set to true, on a single click the user can create events with the duration = highlighted area
  • CssClass - (string) the name of a CSS class that will be applied to the highlighted area
  • Enabled - (boolean) returns true, if the pointer highlighting is enabled, otherwise - false. Can't be set directly
  • FixedStep - (boolean) enables/disables moving the highlighted area by step units (i.e. you won't be allowed to move along the full time scale)
  • HTML - (string) the HTML content that will be added to the highlighted area
  • Step- (int) the duration of the highlighted area in minutes

To enable the pointer highlighting, call the Enable() method:

DHXScheduler.Highlighter.Enable("highlight_section", 120);

The Enable() method has 2 overloads:

1 . Enable(string css);
2 . Enable(string css, int step);

  • css - the name of a CSS class that will be applied to the highlighted area.
    The class must be defined on the client side. Note, to set colors or borders for the area you must use the :hover pseudo-class.
<style>
    .highlight_section {
        opacity: 0.25;
        z-index:0;
        filter:alpha(opacity=25);
    }
    .highlight_section:hover {
        background-color: #90ee90;
    }
</style>
  • step - the duration of the highlighted area in minutes. The default value is 60.

Was this article helpful?

Yes No