JavaScript calendar control for marking several date ranges and associate them to different selection groups
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
Documentation
lib
source
.gitignore
LICENSE
README.md

README.md

MultiSelectionCalendar

MultiSelectionCalendar is a JavaScript calendar control for marking several date ranges and associate them to different selection groups.

Calendar

Demo

See demo here.

History

see history

Programming

How To Install

Download the latest version of MultiSelectionCalendar from Github repository and copy the following JavaScript files and style sheets to your web project:

Simple Example

Insert an input tag of type text into your webpage and assign the CSS class "multiSelectionCalendar":

<!DOCTYPE html>
<html>
<head>
    <link href="styles/bootstrap.css" rel="stylesheet" />
    <link href="styles/multiselectioncalendar.css" rel="stylesheet" />
</head>
<body>
    <input 
        type="text" 
        class="multiSelectionCalendar"         
        selectionIdx="2" />

    <script src="scripts/jquery-1.10.2.js"></script>
    <script src="scripts/bootstrap.js"></script>
    <script src="scripts/mscorlib.min.js"></script>
    <script src="scripts/linq.js"></script>
    <script src="scripts/saltarelle.utils.js"></script>
    <script src="scripts/multiselectioncalendarresource.js"></script>
    <script src="scripts/multiselectioncalendarresource.en.js"></script>
    <script src="scripts/jquery.mousewheel.min.js"></script>
    <script src="scripts/multiselectioncalendar.js"></script>
</body>
</html>

You'll get a calendar showing the current month. No date ranges are preselected since attribute value wasn't set. Now you can select single dates and date ranges with the mouse. The selected dates will be assigned to selection index 2. If you do so, the value of the input field will change automatically to some value like this:

    <input 
        type="text" 
        class="hidden ng-untouched ng-valid ng-dirty ng-valid-parse" 
        selectionidx="2" 
        value="2:12.06.2016-20.06.2016;2:25.06.2016-25.06.2016" />

To change the selection color please change the attribute selectionidx to a natural number "0" < x < "10". selectionidx="0" will erase marked dates. Use this feature to let the user remove selections.

Programming Reference

<input type="text" class="multiSelectionCalendar">

    <input type="text" class="multiSelectionCalendar" [selectionidx] [value] [enabledRanges] [language]/>
  • selectionidx:
    All dates, the user will select from now on, will be assigned to the given selection index.
    selectionidx="0" will erase marked dates, when they are being selected now ! Use this feature to let the user remove selections. possible values: "0", "1", .., "9"
    Default: "0"
    You may set selectionidx by Angular.
  • value:
    The date ranges which should be edited by the user. value will be updated automatically, when user selects dates.
    example: "2:12.06.2016-20.06.2016;4:25.06.2016-25.06.2016"
    Default: ""
    Format: {selection index}:{start date}-{end date};{selection index}:{start date}-{end date};...
    You may set value by Angular directive ngModel.
  • enabledRanges:
    The date ranges which may be markable by the user.
    example: "12.06.2016-20.06.2016;25.06.2016-25.06.2016"
    Default: "" (means all dates are enabled)
    Format: {start date}-{end date};{start date}-{end date};...
    There is no support for Angular. So changing enabledRanges has no effect.
  • language:
    ISO code of the active language. Note ! The language dependent strings are coded in the files multiselectioncalendarresource...js. Feel free to add new languages.
    example: "en"
    Default: "" :means default language (it's currently german)
    Format: "en","de","es", "default",""
    There is no support for Angular. So changing language has no effect.

Using MultiSelectionCalendar with Saltarelle

Saltarelle is a transpiler to generate JavaScript code from C#. MultiSelectionCalendar brings some extra support for using MultiSelectionCalendar in a JavaScript program. There is an assembly Saltarelle.MultiSelectionCalendar.dll which provides some useful C# functions in a Saltarelle project:

namespace Saltarelle.MultiSelectionCalendar
{
	public class MultiSelectionCalendar
	{
		public static void Init()
		{ ...
		}

		public static List<Range> GetDateRangesFromString(string timeRanges)
		{ ...
		}

		public static string GetStringFromDateRanges(List<Range> ranges)
		{ ...
		}
	}
}

Use the static function Init() to reparse the HTML-DOM, when having inserted new calendar controls. Use the static function GetDateRangesFromString() to parse a date range list from a string. Use the static function GetStringFromDateRanges() to encode a list of date ranges to a string.