Introducing Calendar

There are many cases in which you need to enter a date, even in everyday life. For example, you may enter your date of birth when registering for a membership, or select the date when you book a movie at a theater. Unlike other items, the format for entering the date is fixed. The Calendar component provides the function that allows the user to enter and check the desired items more conveniently and quickly.

Example

The input method of the Calendar component varies depending on the situation.

• When checking and selecting the date immediately

  If you are booking a round-trip flight ticket, then you need to be able to check and select the departure and arrival dates at a glance based on the current date. The user can select the date directly while the calendar is open.

• When selecting the date in the search condition

  The search condition is a tool to filter the data you want. It uses the format of the pop-up window, appearing only when entering the search condition and disappearing when selected.

• When having to quickly select a specific date

  Selecting the date in the calendar format offers the advantage of being able to find the desired date intuitively, but it is inconvenient to select a specific date of the past. In this case, it may be faster to enter the date value directly or select from the list provided in the combo format.

Creating Calendar

Select Calendar from the toolbar, and drag and drop it onto Form to create it. Since the format displayed on the screen varies according to the type property value, create 3 Calendar components and specify different type property values for each. The type property values supported by the Calendar component are as follows.

normal (default)
monthonly
spin

If the type property value is "normal", then clicking the calendar icon opens the calendar. When you select the desired date by clicking it, the calendar disappears. If the type property value is "monthonly", then the calendar is expanded. You need to write a separate script that processes the selected value when the desired date is selected. If the type property value is "spin", then the spin button to move the date value appears instead of the calendar icon.

If the type property value is set to 'monthonly', then the calendar is displayed in the expanded form. Since the size of the component does not change automatically, you need to adjust the size of the component after modifying the property value.

Run it with QuickView (Ctrl + F6). If the type property value is not separately set after creating Calendar, then it is set to 'normal' and operates.

Changing Date Format

Different countries have different formats for displaying dates. Country-specific formats are usually processed automatically by modifying the value of the locale property. Usually, the format used the most is set as the default, but you can change the date format if you want the format other than that.

Example

You can see that when the user changes the value of the dateformat property, the date format displayed on the screen changes. The date format that can be entered in the input box is fixed. If you enter the value that is not in the format, then the entered value is not applied to the date format, and the entered value is displayed as-is.

sample_calendar_01.xfdl

The formats that can be entered in the dateformat item are as follows.

strFormat ::= <maskchar> | 'LONGDATE' | 'SHORTDATE'
<maskchar> ::= [<Year>] [<Month>] [<Day>] [<Week>] [<Hour>] [<Minute>] [<Second>] [<MiliSec>]

When specifying the property value with 'LONGDATE', 'SHORTDATE', the format specified in advance is applied according to the locale property value. The order in which the year, month, and day items are places varies by region. You can check how it operates by changing the locale item in the example.

When specifying the <maskchar> property value, it is changed to the specified date format, regardless of the locale property. It is used to fix the date format that is compulsory. However, the <week> item is displayed according to the set locale.

Core features used in the example

locale

Sets the country and language. It uses the combination of the language [_country] code. For example, if you want to specify English used in the US, specify 'en_US' as the property value. You can use the hyphen (-) instead of underscore (_), regardless of case sensitivity. It still operates even if you specify only the language code without specifying the country code. 'EN_US', 'en-US', 'EN' are all processed in the same format.

dateformat

Sets the date format displayed on the screen when the component has no focus. Since it is to specify the format to be displayed on the screen, it does not affect the value of the actual component.

How to implement an example

Place the Static, Edit, Calendar, Button components as shown in the example screen. The Static component displays the title of the input item, and the Edit component receives the locale property value and the dateformat property value.

Select the Button component and write the onclick event function. When the Button component is clicked, the property value entered in the Edit component is applied to the Calendar component.

this.btnChange_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.calDisplay.set_locale(this.editLocale.value);
	this.calDisplay.set_dateformat(this.editDateformat.value);
};

Run it with QuickView (Ctrl + F6) and enter locale, dateformat to check the value displayed in the Calendar component.

Getting Today's Date

Displaying today's date is the basic function of any system. If you are using the Windows operating system, then the clock and today's date are displayed in the lower right corner of the screen. When you run the calendar, today's date is displayed as selected. When creating the search condition based on the date, the function to process today's date is the most basic function as it is specified in the previous 1 week and the previous 1 month based on today's date.

Example

When the button is clicked, today's date is output on the screen. If you want today's date to be displayed when the screen is output, then you can process the script in the onload event function of the Form object. Since this example is to explain how to get today's date, it is processed in the way that operates when the button is clicked.

sample_calendar_02.xfdl

Core features used in the example

Date

Processes date and time with the Date object. The created Date object contains information about the current time. You can extract only the desired item value using the method such as getFullYear.

getFullYear, getMonth, getDate

This is the method that extracts the year, month, and day values from the Date object in the Integer format. Since values are extracted in the Integer format, you need to convert them to strings using the toString method and then combine the values in order to express values in the YYYYMMDD format. As the getMonth method returns 0 for January and 11 for December, 1 must be added to indicate the actual month used.

padLeft

This is the method that is used to create the character string with the length specified in the String object. For example, when trying to express the character "1" as "01", it is used as follows. The first parameter (2) is the length of the character string to be created. The second parameter ("0") is the character string to be filled in on the left. The character string is filled into the remaining length by subtracting the length of the original string.

var dummy = "1".padLeft(2,"0"); // "01"
var dummy = "1".padLeft(5,"*"); // "****1"

value

This is the property that has the date value displayed in the Calendar component. The value property value varies depending on the editformat property value. Since the default value of the editformat property is an 8-digit value of 'yyyyMMdd', the example below creates the character string in the corresponding format and sets it as the value.

How to implement an example

Place the Calendar, Button components as shown in the example screen.

Select the Button component and write the onclick event function. When the Button component is clicked, today's date is calculated and applied to the Calendar component.

this.btnToday_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var currDate = new Date();
	var year = currDate.getFullYear().toString().padLeft(4, "0");
	var month = (currDate.getMonth()+1).toString().padLeft(2, "0");
	var day = currDate.getDate().toString().padLeft(2, "0");

	this.calToday.set_value(year+month+day);
};

Run it with QuickView (Ctrl + F6) and check if today's date is output normally.

Displaying Trailing Day

The Calendar component displays the date in months. At this time, you can set the option to display only the dates for this month or the previous and subsequent months. The default value is false, and only the dates for this month are displayed.

The advantage is that if you only need to select dates for the current month, then you can only show and let the user select the dates that are available for selection.

Example

After selecting the property value using the Radio component, you can check what the Calendar component looks like.

sample_calendar_03.xfdl

Core features used in the example

usetrailingday

Sets whether to display the date displayed in the Calendar component only for the month or the previous month and the next month.

type

How the Calendar component is displayed on the screen varies according to the type property value. In this example, the type property value is set to 'monthonly' to immediately check how the usetrailingday property value is applied.

Boolean

The value selected in the Radio component is transmitted in the form of the character string. The usetrailingday property must specify the Boolean property value, such as true or false. At this time, the value can be converted using the Boolean method.

How to implement an example

Place the Calendar, Radio components as shown in the example screen.

Modify the type property value of the Calendar component to 'monthonly'. You also need to appropriately modify the height value of the component. It will be displayed nicely if it is set to the same value as the width value. For the Radio component, set the innerdataset value as follows. At this time, the codecolumn value corresponding to false should be set to blank characters.

Select the Radio component and write the onitemchanged event function. When selecting the item of the Radio component, the corresponding value is set as the usetrailingday property value of the Calendar component.

this.radioTrailingday_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this.calToday.set_usetrailingday(Boolean(this.radioTrailingday.value));
};

Run it with QuickView (Ctrl + F6) and check if the Calendar component changes according to the selection.

Calculating Difference between Dates

Calculating the difference between dates is the function often used in everyday life. For example, if you have a test ahead, then you may be wondering how many days you have left to study based on today's date. Also, if you are seeing someone, you may want to check how many days you have been with your significant other. In addition to these cases, companies often calculate salaries based on dates.

Example

Receive the dates from two Calendar components and calculate the difference to output it.

sample_calendar_04.xfdl

Core features used in the example

getYear, getMonth, getDay

Since the date value displayed on the screen may vary depending on the locale property value setting, a separate method was used to get the year, month, and day. The getMonth method processes January as 0, so a separate operation was added.

getTime

This is the method of the Date object and it returns the time value in milliseconds. It is used to convert two dates to milliseconds to compare them as the operation.

abs

When calculating the date, if the date entered in the From item is later than the date entered in the To item, the result value is displayed as a negative number. To correct this, the abs method of the Math object is used. The abs method returns the absolute value of the entered value.

How to implement an example

Place the Calendar, Edit, Button, Static components as shown in the example screen.

Select the Button component and write the onclick event function. When the Button component is clicked, the calculated value is displayed in the Edit component by comparing the values selected in the two Calendar components.

this.btnCal_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var fromDate = new Date();
	var toDate = new Date();
	var calDate;
	var day = 1000*60*60*24;
	
	fromDate.setFullYear(this.calFrom.getYear());
	fromDate.setMonth(this.calFrom.getMonth()-1);
	fromDate.setDate(this.calFrom.getDay());
	
	toDate.setFullYear(this.calTo.getYear());
	toDate.setMonth(this.calTo.getMonth()-1);
	toDate.setDate(this.calTo.getDay());
	
	calDate = fromDate.getTime() - toDate.getTime();
	
	this.editDay.set_value(Math.abs(calDate/day));
}

Run it with QuickView (Ctrl + F6), select the date, and click the button to calculate the difference between the dates.

Calculating Date Intervals by Year & Week

Depending on the task, certain date ranges may be processed on a weekly basis. For example, if meetings are held on a regular basis, then they may be displayed as 'Regular Meeting of the 32^nd Week of 2016 '. In this case, it is necessary to calculate which date range means the 32^nd week of 2016.

Example

Receive the year and week as numbers and display the start date of the corresponding date interval in the Calendar component.

sample_calendar_05.xfdl

Core features used in the example

getDay

The getDay method of the Date object returns the day value from 0 to 6. 0 is Sunday and 6 is Saturday. Since the example processes the start of the week as Sunday, set January 1^st of the year to calculate the 1^st week and then check if that day is Sunday.

addDate

This is the method that processes the date operation of the Date object. It returns the date value added by the number specified by the parameter. The date value of the corresponding Date object is changed, and if successfully processed, then it returns the date value calculated in milliseconds. If the number specified by the parameter is negative, then it returns the date value subtracted by the specified number.

parseInt

This is the method that converts the string specified as the parameter into the integer number. For example, the value input in the Edit component is processed as the character string, but if the input value needs to be calculated as a number, then the method for conversion is required. If you operate on the string without converting it, then you may obtain unwanted results.

"3"+1; //"31"
parseInt("3")+1; // 4

How to implement an example

Place the Calendar, Edit, Button, Static components as shown in the example screen. The Calendar component sets the value of the type property to monthonly and the value of the usetrilingday property to true so that you can check the calculated value immediately.

Select the Button component and write the onclick event function. When the Button component is clicked, the entered year and week are calculated and the result is displayed in the Calendar component.

this.btnCal_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	var dDate = new Date(parseInt(this.editYear.value),0,1);
	var nDay = dDate.getDay();
	
	if(nDay != 0) {
		dDate.addDate(-nDay);
	}
	
	dDate.addDate(7 * (parseInt(this.editWeek.value)-1));
	
	this.calWeek.set_value(dDate.getFullYear()
		+(dDate.getMonth()+1).toString().padLeft(2, "0")
		+dDate.getDate().toString().padLeft(2, "0")
	);
}

Run it with QuickView (Ctrl + F6) and enter the year and week to check the date interval.

Specifying Holidays

The function to mark holidays in the calendar is a difficult aspect to implement in a logical way, although it is often used. The event schedule API provided externally is used, or the developer creates and provides data on its own. The Calendar component uses the method to display holiday information by specifying the innerdataset property value.

Example

When the button is clicked, the holiday information is applied and displayed in the Calendar component. The first day of each month of the current year has been specified. The corresponding date information can be changed as needed.

sample_calendar_06.xfdl

Core features used in the example

innerdataset

You can specify Dataset that contains the corresponding date to process a specific date notation in the Calendar component. You can also specify by adding the Dataset component, or by adding data using the innerdataset editor in Nexacro Studio.

backgroundcolumn, textcolorcolumn, bordercolumn

This is the property that specifies the background color, text color, and border information of the area corresponding to the date in the Calendar component. The bordercolumn data should be written based on the border property of the DatePickerControl control.

How to implement an example

Place the Calendar, Button components as shown in the example screen. For the Calendar component, set the type property value to monthonly so that you can check the calculated value immediately.

Add the Dataset component and set 4 columns, which are backgroundcolumn, bordercolumn, datecolumn, and textcolorcolumn. Then, set the innerdataset item of the Calendar component in the property window. You can set the rest of the items in the list as well after setting the innerdataset property value.

Select the Button component and write the onclick event function. When the Button component is clicked, the Dataset data is initialized and the date value of the 1st of each month of the current year is added to Dataset. At this time, if the backgroundcolumn, bordercolumn, textcolorcolumn items are not set, the values specified in the theme are applied.

this.btnCal_onclick = function(obj:nexacro.Button,e:nexacro.ClickEventInfo)
{
	this.dsHoliday.clearData();
	
	var colorBordercolumn = "1px solid green";
	var colorBackgroundcolumn = "yellow";
	var colorTextcolorcolumn = "red";
	
	var currDate = new Date();
	var year = currDate.getFullYear().toString().padLeft(4, "0");	
	
	for(var i=1;i<13;i++) {
		var rIdx = this.dsHoliday.addRow();
		this.dsHoliday.setColumn(rIdx, "backgroundcolumn", colorBackgroundcolumn);
		this.dsHoliday.setColumn(rIdx, "textcolorcolumn", colorTextcolorcolumn);
		this.dsHoliday.setColumn(rIdx, "bordercolumn", colorBordercolumn);
		this.dsHoliday.setColumn(rIdx, "datecolumn", (year+i.toString().padLeft(2, "0"))+"01");	
		
	}
}

The for statement was used to specify the first day of each month as a holiday from January to December. The initial value of the variable i is set to 1, incremented by 1 until it is less than 13, and the code within the statement is repeatedly executed. Since a new value is added to Dataset, Row is added with the addRow method, and data is specified to the specified column using the setColumn method. It is the same as adding Row and setting the value in Nexacro Studio as shown in the figure below.

Run it with QuickView (Ctrl + F6) and click the button to specify the specified holiday.

Converting to Lunar Dates

The conversion of solar dates to lunar calendars does not have clear rules. So, if you look at most lunar date conversion scripts, there is a limit to converting only from some point to some point. The basic data for that period is specified in the script and calculated. In this example, we will take a look at the conversion of 1900 to 2040 lunar dates.

Example

When the solar calendar date is entered, the lunar date is displayed.

sample_calendar_07.xfdl

Core features used in the example

concat

When setting the value in the Calendar component, the value is set in the same way as "20181212", and the concat method is used to combine the strings divided by year, month, and day into one.

How to implement an example

Place 2 Calendar components. The first Calendar component is for inputting solar calendar dates. The second Calendar component is for displaying lunar dates. Set the value of the enable property value to false. Then, place one more CheckBox component. Because there is the concept of a leap month for lunar dates, display it in the checkbox if it is the leap month.

Write the onchanged event function so that the lunar date is displayed immediately after entering the solar calendar date. The lunar date is calculated from the input value and displayed in the Calendar component and the CheckBox component.

this.Calendar00_onchanged = function(obj:nexacro.Calendar,e:nexacro.ChangeEventInfo)
{
	var c = new String(obj.value);
	var y = c.substr(0,4);
	var m = c.substr(4,2);
	var d = c.substr(6,2);
	var lunar = this.lunarCalc(y, m, d, 1);
	lunar.month = lunar.month < 10 ? "0"+lunar.month : lunar.month;
	lunar.day = lunar.day   < 10 ? "0"+lunar.day   : lunar.day;
	
	this.Calendar01.set_value(String().concat(lunar.year, lunar.month, lunar.day));
	this.CheckBox00.set_value(lunar.leapMonth);
};

The function called in the onchanged event is lunarCalc. Here, the entered solar calendar date is calculated as the lunar calendar date. Rather than a calculation, it is more about finding and returning the corresponding date information in an array called lunarMonthTable.

this.lunarCalc = function (year, month, day, type, leapmonth)
{
	var solYear, solMonth, solDay;
	var lunYear, lunMonth, lunDay;
	var lunLeapMonth, lunMonthDay;
	var i, lunIndex;
	
	var solMonthDay = [31, 0, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
	
	/* range check */
	if (year < 1900 || year > 2040)
	{
		alert('This example supports solar to lunar from 1900 to 2040 only');
		return;
	}

Run it with QuickView (Ctrl + F6) and select the date in the first Calendar to check the lunar date.

Correcting Entered Date

When you select the date directly from the calendar, the selected date value is processed as-is, but if you enter the value directly into the text editing area or set the value in the script, then it may be out of the date range or missing values may be entered. In this case, the date value is internally corrected according to the rules and processed as the corrected date.

Example

When you select the value to enter in the Radio component, the corrected value is displayed in the Calendar component. The date correction rules are as follows.

• When the year, month, and day items are empty, they are changed to "01".

  If only "2018" is entered, then it is processed as "20180101".

• When "00" or "0" is entered, it is processed as the value minus -1.

  If "201800" is entered, then it is processed as "20180001" and then as "20171201".

• When the input exceeds the month and day range, it is processed as the added value.

  If "20181238" is entered, then it is processed as "20190107" by adding 7 from "20181231".

sample_calendar_08.xfdl

Core features used in the example

value

In the case of the Calendar component, the value entered by the user may be different from the value property value that is actually processed. In addition to the rules described in the example, it may differ from the value entered, depending on the editformat property. In general, because the path that the user can enter is limited, exceptional situations do not occur. However, if you do not know the characteristics of the value property in advance, then you cannot check the cause when the desired data is not received.

How to implement an example

In the example, the GroupBox component was used to separate and display the Radio components according to the rules. It does not affect the operation.

The calendarId property added as the user property will be used when processing the event of the Radio component.

Set the value property value of the Calendar component, which corresponds to the calendarId property value, which is the user property of the Radio component, where the event occurred to the selected item value.

this.Radio_onitemchanged = function(obj:nexacro.Radio,e:nexacro.ItemChangeEventInfo)
{
	this[obj.calendarId].set_value(e.postvalue);
};

In the example, since the placement of 3 components is repeated 3 times, copy and paste was used. This is a simple example, so you can repeat the steps from step 1.

Specifying DatePickerControl Style

DatePickerControl is the area where you can select a date in the calendar form in the Calendar component. Since it can be used not only in the Calendar component but also in the Grid component, it is separated into a separate control. Let us take a look at how to specify the style of the DatePickerControl area in the Calendar component.

Example

On the left, the default theme is applied, and on the right, some style properties have been changed.

sample_calendar_09.xfdl

Core features used in the example

datepicker

This is the property that is for accessing DatePickerControl, the child control of the Calendar component. In the example, it is used as the child selector to set the style property.

How to implement an example

DatePickerControl can be divided into two parts, which are the head that displays the year and month with the button and the body that displays the day and date. The body again consists of weekband indicating the day of the week and each dayitem. In the code below, the background colors of the head, weekband areas are changed, the borderlines of the body area are made invisible, and Saturday and Sunday are displayed in the same color as the other days.

.Calendar.sample_calendar_09 .datepicker .head
{
	background : orangered;
}
.Calendar.sample_calendar_09 .datepicker  .body .weekband
{
	background : orangered;
}

.Calendar.sample_calendar_09 .datepicker  .body
{
	-nexa-border : 1px none transparent;

}

.Calendar.sample_calendar_09 .datepicker .body .dayitem[userstatus=saturday]
{
	color : #333333;
}
.Calendar.sample_calendar_09 .datepicker .body .dayitem[userstatus=sunday]
{
	color : #333333;
}
.Calendar.sample_calendar_09 .datepicker .body .weekitem[userstatus=saturday]
{
	color : #ffffff;
}
.Calendar.sample_calendar_09 .datepicker .body .weekitem[userstatus=sunday]
{
	color : #ffffff;
}

Setting Next Day as Weekday

If the day selected in the Calendar component is Friday, set the Monday of the following week, not Saturday.

Example

If you select a date between Sunday and Thursday, then the next day is displayed in the second Calendar component, and if you select Friday or Saturday, then it displays Monday.

sample_calendar_10.xfdl

Core features used in the example

getDayOfWeek

Returns the value of the day of the week on the selected date. Sunday returns 0 and Saturday returns 6.

How to implement an example

Use the getDayOfWeek method to check the day value of the selected date and process it separately in the cases of Friday and Saturday.

this.Calendar00_onchanged = function(obj:nexacro.Calendar,e:nexacro.ChangeEventInfo)
{
	var nWeek = obj.getDayOfWeek();
	if(nWeek == 5)
	{
		this.Calendar01.set_value (this.AddDateOffset(e.postvalue, 3));
	}
	else if(nWeek == 6)
	{
		this.Calendar01.set_value (this.AddDateOffset(e.postvalue, 2));
	}
	else 
	{
		this.Calendar01.set_value (this.AddDateOffset(e.postvalue, 1));
	}
	this.setFocus(true, false);
};

Return the value added by the specified day for processing the next day.

this.AddDateOffset = function(sDate, nOffset)
{
    var nYear = parseInt(sDate.substr(0, 4));
    var nMonth = parseInt(sDate.substr(4, 2));
    var nDate = parseInt(sDate.substr(6, 2)) + nOffset;

    return this.MakeDate(nYear, nMonth, nDate);
}

this.MakeDate = function(nYear, nMonth, nDate)
{
    var objDate = new Date(nYear, nMonth-1, nDate);

	var sYear   = objDate.getFullYear().toString();
	var sMonth  = (objDate.getMonth() + 1).toString().padLeft(2, "0");
	var sDate   = (objDate.getDate()).toString().padLeft(2, "0");

	return sYear + sMonth + sDate;
}

Delivering the information of selected year and month

Let's look at how to process the information of selected year and month in the Calendar component.

Example

When a year and month are selected in the first Calendar component, information is passed to the second Calendar component to be displayed in the calendar accordingly.

sample_calendar_11.xfdl

Core features used in the example

datepickerchangetype

If the property value is set to "button", you can choose a method to select from a list rather than spin when selecting a year/month in the Calendar component. If this is set to "auto", the set value differs depending on the Desktop and Mobile environments.

How to implement an example

The selected values when year and month items are selected (clicked) in the Calendar component are processed.

this.Calendar00_onlbuttonup = function(obj:nexacro.Calendar,e:nexacro.MouseEventInfo)
{
	var yeartext;
	var monthtext;
	if(e.fromreferenceobject.id.includes("yearitem")) {
		yeartext = e.fromreferenceobject.text;
		this.Calendar00_00.set_value(yeartext);
	}
	if(e.fromreferenceobject.id.includes("monthitem")) {
		yeartext = this.Calendar00.datepicker.head.yearstatic.text;
		monthtext = e.fromreferenceobject.text;
		this.Calendar00_00.set_value(yeartext+this.addZero(monthtext));
	}
};

this.addZero = function(string) {
  if (string.length === 1) {
    return "0" + string;
  } else {
    return string;
  }
}

The value property value of the Calendar component does not change when the year/month values are changed. The value of the value property is reflected when the day value is selected.

this.Calendar00_ondayclick = function(obj:nexacro.Calendar,e:nexacro.CalendarDayClickEventInfo)
{
	this.Calendar00_00.set_value(e.date);
};