Thanks for the reply. But what I wants to do is change the selected day in my SelectionChanging event. Because once SelectionChanging occur, I’m adding a custom day with a style. In the second selection I will be able to add another custom day with different style to the same day. Therefore I need to change the selected day in my SelectionChanging event. I tried, but not succeeded. Below is my code.

<script type="text/javascript">

function ChangeSelection(sender, args) {

            if (document.getElementById("txtHiddenHolidayType").value != null) {

                var Date = sender.get_selectedRange();

                if (Date != null) {

                    var selectedType = document.getElementById("txtHiddenHolidayType").value;

                    var style = GetSelectedStyle(selectedType);

                    document.getElementById("txtHiddenSelectedDate").value = document.getElementById("txtHiddenSelectedDate").value + Date;

                    var arr = new Array();

                    var arr2 = new Array();

                    arr = document.getElementById("txtHiddenSelectedDate").value.split(",");

                    for (var i = 0; i < arr.length; i++) {

                        arr2 = arr[i].split(" ");

                        var selectedDayName = arr2[0];

                        var selectedMonthName = arr2[1];

                        var selectedMonth = FindMonth(selectedMonthName);

                        var selectedDay = arr2[2];

                        var selectedYear = arr2[5];

                        var strDate_Style = selectedDayName + " " + selectedMonthName + " " + selectedDay + " " + "xx" + " " + "xxx" + " " + selectedYear + "#" + selectedType + "%";

                        document.getElementById("txtHiddenDateCollection").value = document.getElementById("txtHiddenDateCollection").value + strDate_Style;

                        $find(sender._id).addCustomDay(selectedYear, selectedMonth, selectedDay, "", "", "", style);

                    }

                }

            }

        }

</script>

<ig:WebMonthCalendar ID="WebMonthCalendar2" runat="server" DayNameFormat="FirstLetter"

                                    EnableWeekNumbers="True" FirstDayOfWeek="Monday" Height="150px" HideOtherMonthDays="True"

                                    SelectionType="Multi" ShowNextPrevMonth="False" Width="200px" FooterContent=""

                                    TitleFormat="Month" ShowFooter="False" StyleSetPath="../ig_calendar2.css" CellSpacing="1"

                                    EnableMonthDropDown="False" EnableYearDropDown="False">

                                    <ClientEvents SelectionChanging="GetSelectedDate" SelectionChanged="ChangeSelection" />

                                </ig:WebMonthCalendar>

Hi Hasithi,

I confused with attached logic related to setting value of html elements based on get_selectedRange(). I do not recommend to use that method by similar way. That was designed to get range of 2 dates. Returned value is valid only if it contains array of 2 Date objects. If it is null or array of 1 Date, then range is invalid. I suggest to use get_selectedDate() method instead of get_selectedRange().

If you need to catch situation when already selected date was clicked, then please use the MouseDown event. In previous response I gave you codes which check if clicked date was selected and it showed alert for that. In your codes, instead of alert, you may call your ChangeSelection(...) directly or use another logic for that situation.

Sorry I was pasted a wrong one. It should as below.

function GetSelectedDate(sender, args) {

            var Date = args.get_dates()[0];

            document.getElementById("txtHiddenSelectedDate").value = Date;

            var strDate_Style;

            var arr = new Array();

            arr = document.getElementById("txtHiddenSelectedDate").value.split(" ");

            var selectedDayType = arr[0];

            var selectedMonthName = arr[1];

            var selectedMonth = FindMonth(selectedMonthName);

            var selectedDay = arr[2];

            var selectedYear = arr[5];

            var selectedType = document.getElementById("txtHiddenHolidayType").value;

            var oldStyle = "";

            if (selectedType != "") {

                var style = GetSelectedStyle(selectedType);

                if (sender._cd0 != null) {

                    for (var i = 0; i < sender._cd0.length; i++) {

                        if (sender._cd0[i].day == selectedDay && sender._cd0[i].month == selectedMonth && sender._cd0[i].year == selectedYear) {

                            oldStyle = sender._cd0[i].css;

                            break;

                        }

                    }

                }

                if (style == oldStyle) {

                    strDate_Style = Date + "#" + 7 + "%";

                    document.getElementById("txtHiddenDateCollection").value = document.getElementById("txtHiddenDateCollection").value + strDate_Style;

                    sender.addCustomDay(selectedYear, selectedMonth, selectedDay, "", "", "", "Trading_Day ");

                }

                else {

                    strDate_Style = Date + "#" + selectedType + "%";

                    document.getElementById("txtHiddenDateCollection").value = document.getElementById("txtHiddenDateCollection").value + strDate_Style;

                    sender.addCustomDay(selectedYear, selectedMonth, selectedDay, "", "", "", style);

                }

            }

            document.getElementById("txtHiddenDataChanged").value = "1";

        }