Calendars - SeeSharp

Dynamically Generated Images with ASP.NET MVC

2009-10-18T13:39:47.257

For a site I'm working on using ASP.NET MVC, I intended to place a Date badge beside the blog and news posts I'm writing. Since in ASP.NET MVC there's no notion of custom controls (well, at least not like in WebForms) you'll have to do this manually, but as it turned out it was pretty easy to do.

What I needed to do was to convert a Date instance, e.g. 04.23.2009 to a user friendly calendar icon like this one:

I've seen blogs and site using different icon for each day of the month or a similar trick to do this, but why not actually render it using Graphics API and a picture?

The first step was to decide what should be returned in you Controller's action method, as the action result? Since there's nothing that returns an Image as the result, let's create one:

public class ImageResult : ActionResult
{
  public Image Image
  {
      get; set;
  }

  public ImageFormat ImageFormat
  {
      get; set;
  }

  private static Dictionary<ImageFormat, string> FormatMap
  {
      get; set;
  }

  static ImageResult()
  {
      CreateContentTypeMap();
  }

  public override void ExecuteResult(ControllerContext context)
  {
      if (Image == null) throw new ArgumentNullException("Image");
      if (ImageFormat == null) throw new ArgumentNullException("ImageFormat");

      context.HttpContext.Response.Clear();
      context.HttpContext.Response.ContentType = FormatMap[ImageFormat];

      Image.Save(context.HttpContext.Response.OutputStream, ImageFormat);
  }

  private static void CreateContentTypeMap()
  {
      FormatMap = new Dictionary<ImageFormat, string>
      {
          { ImageFormat.Bmp,  "image/bmp"                },
          { ImageFormat.Gif,  "image/gif"                },
          { ImageFormat.Icon, "image/vnd.microsoft.icon" },
          { ImageFormat.Jpeg, "image/Jpeg"               },
          { ImageFormat.Png,  "image/png"                },
          { ImageFormat.Tiff, "image/tiff"               },
          { ImageFormat.Wmf,  "image/wmf"                }
      };
  }
}

Pretty easy, ha? You just need to specify the image and the format and it is rendered to the HttpContext as an image. The controller action to render the text would something like this:

public ActionResult GetCalendarBadge(DateTime displayDate)
{
  Graphics graphics = ?;
  Bitmap bmp = ?;

  //Draw using graphics

  //Direct the output to the bitmap

  return new ImageResult { Image = bmp, ImageFormat = ImageFormat.Png };
}

...and on the view:

<% foreach(var item in this.Model.News) %>
     <%= Html.Image<NewsController>(o => o.GetCalendarBadge(item.DisplayDate), 100, 100) %>
<% } %>

Now, to make things easier, le's use an existing bitmap as our canvas and just draw the values on it. To do this, add an existing image to your project and load it. The rest is just GDI API that renders the date values according to user's Cultural setting.

public ActionResult GetCalendarBadge(DateTime displayDate)
{
  var bmp = Images.Calendar;
  var g = Graphics.FromImage(bmp);

  using (var genericFormat = GetStringFormat())
  {
      var yearRect = new Rectangle(24, 13, 40, 15);
      var dayOfMonthRect = new Rectangle(10, 29, 70, 44);
      var dayNameRect = new Rectangle(10, 30, 70, 10);
      var monthNameRect = new Rectangle(10, 61, 70, 10);

      using(var headerFont = new Font("Tahoma", 7.5f, FontStyle.Regular))
      using(var footerFont = new Font("Tahoma", 7.5f, FontStyle.Regular))
      using (var dayFont = new Font("Tahoma", 14, FontStyle.Bold))
      {
          var day = CurrentCulture.Calendar.GetDayOfMonth(displayDate).ToString();
          var month = CurrentCulture.Calendar.GetMonth(displayDate);
          var year = CurrentCulture.Calendar.GetYear(displayDate).ToString();
        
          var weekDay = CurrentCulture.Calendar.GetDayOfWeek(displayDate);
          var dayName = CurrentCulture.DateTimeFormat.GetDayName(weekDay);
          var monthName = CurrentCulture.DateTimeFormat.GetAbbreviatedMonthName(month);
        
          g.DrawString(year, headerFont, Brushes.White, yearRect, genericFormat);
          g.DrawString(day, dayFont, Brushes.Black, dayOfMonthRect, genericFormat);
          g.DrawString(dayName, footerFont, Brushes.Black, dayNameRect, genericFormat);
          g.DrawString(monthName, footerFont, Brushes.Black, monthNameRect, genericFormat);
      }
  }

  return new ImageResult { Image = bmp, ImageFormat = ImageFormat.Png };
}

Note that CurrentCulture property returns the running user's CultureInfo which will help 'Translating' the date value correctly for different Cultures. What we achieved is a nice calendar badge with render date values and it is not even constrained to our Canvas size. Hope this helps.

Farsi Library for the Web

2009-10-19T07:53:39.797

There's been a lot of request for web and windows controls supporting multiple cultures and calendars, like the already existing WinForm Controls of Farsi Library. The existing ASP.NET Calendar control does not render correctly when used in other cultures and this is the case when you're using FA-IR culture. Although this problem is partially because FA-IR has a wrong calendar set for its default calendar (GregorianCalendar instead of PersianCalendar this has its own story too), there's no workaround. What I did was to create a new control to correctly render the calendar information in Gregorian Calendar, Persian Calendar and Hijri Calendar.

The control currently works exactly as ASP.NET calendar, meaning it supports all the use cases of standard ASP.NET calendar control like styling, using on update panels, etc. This control with a complementary DatePicker control will be added to the Farsi Library project as I'm planning for the next major release. The pre-beta sources will soon be available in case you are interested.

Persian Calendar Problem

2009-10-19T13:54:14.823

If you've read my older posts, you already know about the problem of FA-IR culture and the default calendar. When creating applications that run in different cultures and languages, Date specific controls like DatePickers, Scheduling controls, etc usually use current Culture's calendar to calculate dates, and to represent a DateTime instance to string representation. Also, control developers use DateTime.MinValue as a default (not set) value. But what happens when a culture's calendar does not accept DateTime.MinValue as a valid date? One example, of course, is our PersianCalendar in which the least possible date is 22/03/622 (in Gregorian calendar) that maps to 1/1/1 in Persian calendar.

It gets worse when you storing data in the database! Suppose a user that uses Gregorian Calendar has logged-in and selected a date in the valid range for Gregorian Calendar, but invalid for Persian Calendar (the red arrows in the picture). What happens when the first user saves the data, and then the user logged in with Persian Calendar tries to load it? You'll have a nice exception on your hand! (This, of course is a hypothetical example. It *might* not be possible to save the date prior to 1753 in some RDBMS). You can't even call ToString() method on DateTime instance that falls in the invalid range!

[Fact]
public void UsingInvalidDateRangeThrows()
{
 using (new CultureSwitchContext(new PersianCultureInfo()))
 {
    DateTime dt = DateTime.MinValue;
    Assert.Throws<ArgumentOutOfRangeException>(() => dt.ToString());
 }
}

[Fact]
public void CanConvertToStringWithInvariantCulture()
{
 using (new CultureSwitchContext(new PersianCultureInfo()))
 {
     DateTime dt = DateTime.MinValue;
     Assert.DoesNotThrow(() => dt.ToString(CultureInfo.InvariantCulture));
 }
}

You'll get an exception complaining :

Specified time is not supported in this calendar. It should be between 03/21/0622 00:00:00 (Gregorian date) and 12/31/9999 23:59:59 (Gregorian date), inclusive.

I think I understand why guys at Microsoft BCL decided not to set PersianCalendar as the default calendar of FA-IR culture : Because your application / component may break if you switch to FA-IR culture, but why not set it as an OptionalCalendar?

Lesson learned : Avoid calling DateTime.ToString recklessly, specially if you're developing a Custom Control or creating a multi-cultured application. Pay attension to Calendar.MinSupportedDateTime property.