mvc example for displaying or Showing dates using DayCalendarPage extension method

Description:-

            In this example we explain that how to create a event dates in List format with event title and event description in mvc4.

In my events web site I need to show event dates in lists format so users can easily see them and understand it.. As there are more than one view where I need this functionality I wrote HTML extension method that outputs day calendar view based on current date. In this posting I will show you my extension method and show you how to use it.

DayCalendarPage extension method

Here is the extension method that generates day calendar page like shown above.

---

public static MvcHtmlString DayCalendarPage(this HtmlHelper helper, DateTime date)
{
    var buffer = new StringBuilder();
    buffer.Append(@"<div class=""dayCalendarPage"">");

    buffer.Append(@"    <div class=""title"">");
    buffer.Append(date.ToString("MMM"));
    buffer.Append(@"    </div>");

    buffer.Append(@"    <div class=""day"">");
    buffer.Append(date.ToString("dd"));
    buffer.Append(@"    </div>");

    buffer.Append(@"</div>");

    return MvcHtmlString.Create(buffer.ToString());
}

---

This method outputs HTML that is made to nice day calendar page using CSS.

CSS

Here is my CSS that makes calendar look nice. It is not very optimal I think but it works.

---

/* DAY CALENDAR PAGE */ 
.dayCalendarPage
{
     clear:none;
     float:left;
     text-align:center; 
     border:1px solid lightgrey; 
     margin-right:10px;
}
.dayCalendarPage .title
{
     background-color:Red;
     color:White;
     width:50px;    
}
.dayCalendarPage .day
{
     font-size:15pt;
     font-weight:bold;
     padding-top: 5px;
     padding-bottom: 5px;
}

---

Now as you have extension method and styles added to your project it is time to use them.

How to use DayCalendarPage method

Here is the example about how to use DayCalendarPage extension method.

---

@foreach (var item in Model.Results) {
     <tr>
        <td colspan="10">
           @Html.DayCalendarPage(item.StartDate)
           <div>
              @Html.ActionLink(item.Title,"event", new { id = item.Id})
              <br />
              @item.Description
           </div>
       </td>
    </tr>
}

to sorting data in gridview with up and down arrow sorting data in gridview in asp.net

change the background of gridview row when mouse is hover changebackground color of gridview in asp.net

to implement this you have to follows this step

1)create table with coloumn id,title,description in sqlserver.

2) create the Linqtosql Dataclasses and and drag and drop the table that you are created.

Default1Controller.cs:-

using System;

using System.Collections.Generic;

using System.Linq;

using System.Text;

using System.Web;

using System.Web.Mvc;

using MvcApplication1.Models;

namespace MvcApplication1.Controllers

{

    public  class Default1Controller : Controller

    {

        //

        DataClasses1DataContext dc = new DataClasses1DataContext();

        // GET: /Default1/

      

        public ActionResult Index()

        {

            var p = (from l in dc.daycalenders select l).ToList();

            return View(p);

        }

      

    }

    public static class abc

    {

        public static MvcHtmlString DayCalendarPage(DateTime date)

        {

            var buffer = new StringBuilder();

            buffer.Append(@"<div class=""dayCalendarPage"">");

            buffer.Append(@"    <div class=""title"">");

            buffer.Append(date.ToString("MMM"));

            buffer.Append(@"    </div>");

            buffer.Append(@"    <div class=""day"">");

            buffer.Append(date.ToString("dd"));

            buffer.Append(@"    </div>");

            buffer.Append(@"</div>");

            return MvcHtmlString.Create(buffer.ToString());

        }

    }

}

Index.cshtml:-

@model IEnumerable<MvcApplication1.Models.daycalender>

@{

  

    ViewBag.Title = "Index";

}

<h2>Index</h2>

<p>

    @Html.ActionLink("Create New", "Create")

</p>

 <style type="text/css">

     .dayCalendarPage

{

     clear:none;

     float:left;

     text-align:center; 

     border:1px solid lightgrey; 

     margin-right:10px;

}

.dayCalendarPage .title

{

     background-color:Red;

     color:White;

     width:50px;    

}

.dayCalendarPage .day

{

     font-size:15pt;

     font-weight:bold;

     padding-top: 5px;

     padding-bottom: 5px;

  

}

 </style>

  <table>

    @foreach (var item in Model) {

      

     <tr>

        <td colspan="10">

          

           @MvcApplication1.Controllers.abc.DayCalendarPage(Convert.ToDateTime(item.startdate))

           <div>

              @Html.ActionLink(item.title,"event", new { id = item.id})

              <br />

            @item.descp

           </div>

       </td>

    </tr>

           

}

      </table>