Follow by Email

Thursday, May 30, 2013

Ajax Calendar CSS | Adding Stylesheet or css to Ajax CalendarExtender in Asp.net

Hello in this post i will be showing how to add CSS or theme to a Ajax Calendar in asp.net.

Example :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxCalendar.aspx.cs" Inherits="ajaxCalendar" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .ajax__calendar_container
        {
            background-color: #ffffff;
            border: 1px solid #d0d0d0;
        }
       
        .ajax__calendar_title
        {
            background-color: #d0d0d0;
            padding: 3px;
        }
        .ajax__calendar_body
        {
            border: 0px;
        }
        .ajax__calendar_container TD
        {
            padding: 0px;
            margin: 0px;
            font-size: 11px;
        }
        .ajax__calendar .ajax__calendar_dayname
        {
            border-bottom: 1px solid #000;
        }
        .ajax__calendar_dayname
        {
            height: 17px;
            width: 18px;
            text-align: right;
            padding: 0px 2px;
        }
       
        .ajax__calendar .ajax__calendar_active .ajax__calendar_day
        {
            background-color: #edf9ff;
            border: 1px solid #0066cc;
            color: #0066cc;
        }
        .ajax__calendar .ajax__calendar_day
        {
            border: 1px solid #ffffff;
        }
        .ajax__calendar .ajax__calendar_active .ajax__calendar_day
        {
            background-color: #000000;
            color: #ffffff;
        }
        .ajax__calendar .ajax__calendar_day
        {
            border: 1px solid #ffffff;
        }
        .ajax__calendar_day
        {
            height: 17px;
            width: 18px;
            text-align: right;
            padding: 0px 2px;
            cursor: pointer;
        }
       
       
        .ajax__calendar_today
        {
            background-color: #d0d0d0;
            color: #545454;
        }
        .ajax__calendar_hover .ajax__calendar_today
        {
            color: #000000;
        }
        .caltheme table tr td
        {
            padding: 0;
            margin: 0; /*background-color:White;*/
            padding-right: 0px;
            padding-left: 0px;
            border: 0px;
        }
       
        .caltheme td:hover
        {
            background-color: #545454;
            color: #ffffff;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:ScriptManager ID="ScriptManager1" runat="server" EnablePageMethods="true" />
        <asp:TextBox ID="txtDate" runat="server"></asp:TextBox>
        <ajax:CalendarExtender ID="CalendarExtender1" TargetControlID="txtDate" CssClass="caltheme"
            runat="server" Format="dd/MM/yyyy">
        </ajax:CalendarExtender>
    </div>
    </form>
</body>
</html>

Output:

1. Before Applying CSS

2. After Applying CSS