In this blog post, you will learn asp.net Calendar control with examples and how to create a custom calendar control in asp.net using javascript and CSS. Previously I have explained File Upload Control in ASP.NET web application.

ASP.NET Calendar Control

The Calendar control is used to display a calendar in the browser. This control displays a one-month calendar that allows the user to select dates and move to the next and previous months.

Syntax:

Calendar controls allow the users to select a single day, a week, or an entire month. This is done by using the SelectionMode property. We can also set the Selected Date property that shows a specified date in the calendar.

How to Create a Custom Calendar Control in ASP.NET

What’s the need of creating a user control when the above readymade calendar control available. The answer is simple is that for the end-user it seems difficult to use the above built-in calendar control. So we will design and create a custom calendar control in asp.net using javascript and CSS.

So let’s start building our Custom Date Selector Calendar Control. Find the below source code:-

Calendar.js

function PreviousMonth() {
    DigitMonth--;
    if (DigitMonth  12) {
        DigitMonth = 1;
        year++;
    }
    if (DigitMonth.length == 1)
        twoDigitMonth = "0" + DigitMonth;
    if (ani == 0) {

        changeDate();
        SetCalendarDates();
        setSelectedDate();
    } else {
        changeDateNext();
        SetCalendarDatesNext();
    }
}

function setSelectedDate() {
    for (var v = 1; v = i) {
            $("#td" + v).html(val);
            val++;
        }
        if (val > j + 1)
            $("#td" + v).html("");
    }
}

function SetCalendarDatesNext() {
    var i = MonthFirstDayWeek(DigitMonth);
    var j = LastDayOfMonth(DigitMonth);
    var val = 1;

    $(".WeekDate").toggle("slide", { direction: "left" }, function () {
        for (var v = 1; v = i) {
                $("#td" + v).html(val);
                val++;
            }
            if (val > j + 1)
                $("#td" + v).html("");


            //$("#td" + v).toggle("slide", { direction: "right" });
        }
        for (var v = 1; v = i) {
            $("#td" + v).html(val);
            val++;
        }
        if (val > j + 1)
            $("#td" + v).html("");

        //$("#td" + v).toggle("slide", { direction: "left" });
    }
    for (var v = 1; v 
CustomCalendar.css
body {
    padding: 0;
    margin: 0;
}

#CalenderWrapper {
    width: 300px;
    background: #f25e46;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    margin: 0 auto;
    border-radius: 0
}

    #CalenderWrapper .Header {
        background: #e2543d;
        height: 50px;
        line-height: 50px;
        border-radius: 0;
        font: 15px Helvetica Neue;
        color: #fff;
        line-height: 50px;
    }

        #CalenderWrapper .Header img {
            cursor: pointer
        }

.WeekName {
    font: 11px arial;
    color: #992918;
}

    .WeekName td {
        border-bottom: 1px #f46a53 solid;
    }

.WeekDate {
    font: 12px arial;
    color: #fff;
}

    .WeekDate td:hover {
        background: #ca4b37;
        cursor: pointer
    }

.selected {
    background: #ca4b37;
    cursor: pointer
}

.CalenderStart {
    width: 280px;
    background: #e2543d;
    height: 50px;
    -moz-box-shadow: 0 0 5px #888;
    -webkit-box-shadow: 0 0 5px#888;
    box-shadow: 0 0 5px #888;
    margin: 0 auto;
    margin-bottom: 20px;
    line-height: 50px;
    padding: 0 10px;
}

    .CalenderStart p {
        font: 15px Helvetica Neue;
        color: #fff;
        line-height: 50px;
        text-align: center;
        padding: 0;
        margin: 0
    }

    .CalenderStart span {
        background: url(../images/calendar_white.png) no-repeat;
        height: 20px;
        width: 20px;
        float: left;
        margin: 15px 0 0 0
    }

Default.aspx





    

Download Source Code

Conclusion

I hope you liked this article on proper how to create custom calendar control in asp.net. I would like to have feedback from my blog readers. Your valuable feedback, question, or comments about this article are always welcome.

The post How to Create a Calendar Control in ASP.NET appeared first on DotNetTec.