Blocking, marking, highlighting dates

Blocking, marking, 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 some other variation.
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,
          Zones = new List<Zone>() { new Zone { Start = 0, End = 15 * 60 } }// if Zones isn't specified the entire day is blocked
    });

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
Examples: Creating events from 3rd May,2012 till the EndDate value

new DateTime(2012,5,3) 
  • EndDate

DataType: DateTime
Description: The Date object that sets the limitation end date
Examples: Denies creating events from the StartDate value till 3rd September,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<Zone>
Description: The period in minutes that should be limited
Examples: 2 limitation 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 } }
  • HTML

DataType: string
Description: The HTML content that will be added to the blocked range
Examples: Draws a DIV with the specified text over the blocked range

<b>Blocked</b>
  • Invert

DataType: bool
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<Section>
Description: Allows you to block date(s) just for specific items of the views. BTW, the specified date(s) will be blocked just in the related view(s)
Examples: 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
Examples: Marks events from 3rd May,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 3rd September,2012:

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

DataType: DayOfWeek
Description: A day that should be marked
Examples: Marks each Monday

Day = DayOfWeek.Monday
  • Zones

DataType: List<Zone>
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 marked and blocked
Examples: If the parameter isn't specified, events will be just marked events will be marked and blocked:

SpanType= DHXTimeSpan.Type.BlockEvents
  • CssClass

DataType: string
Description: The name of a css class
Examples: Draws a DIV and applies the 'gray_section' css class to it:

CssClass = 'gray_section'
  • HTML

DataType: string
Description: The HTML content that will be added to the marked range
Examples: Draws a DIV with the specified text over the marked range:

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

DataType: bool
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<Section>
Description: Allows you to mark date(s) just for specific items of the views. BTW, the specified date(s) will be marked just in the related view(s)
Examples: 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 - (bool) 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 - (bool) returns true if the pointer highlighting is enabled, otherwise - false. Can't be set directly
  • FixedStep - (bool) 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 method Enable():

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

comments powered by Disqus