The solution you provided has a bug which can be replicated by following these steps.
Try to filter OrderDate column by picking 12th April 2016 from calender and try to filter as "Equals To". It will work fine. Then without clearing date, pick another date as 30th April 2016 and try to filter as "Equals To" ; you will saw unhandled error which detail I will add in quote.

There is strange thing. If you add date in filter column first time as 30th April 2016 then it works without any issue. But after that even if you will choose 1st April 2016 then you will saw an unhandled error.

To make sure that I applied your provided solution properly; I am attaching modified pages also.

Is any way by which background color of calendar can remove ! We like look of calendar of FilterEditType "CalendarCombo" without yellowish backcolor. I tried intersoft resource http://developer.intersoftsolutions.com/display/WebUI/Built-in+Custom+Editor . But I was not able to see any VistaCalendar on that link.

Stack trace and other detail is copied below .

Page ErrorAn unexpected error occurred in: http://localhost/WebGridWithDateColumExp.aspx. String was not recognized as a valid DateTime.Stack Trace: at System.DateTime.Parse(String s, IFormatProvider provider)
at System.Data.ConstNode..ctor(DataTable table, ValueType type, Object constant, Boolean fParseQuotes)
at System.Data.ExpressionParser.Parse()

regards

Sachin

<td class="WCR2_InboundCellStyle" style="text-align: center; font-family: Segoe UI, Tahoma; font-size: 8pt; font-weight: normal; vertical-align: middle; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; background-color: rgb(253, 199, 77) !important;" unselectable="on" y="2016" m="4" d="18" cssname="WCR2_InboundCellStyle">

<td class="WCR2_InboundCellStyle" style="text-align: center; font-family: Segoe UI, Tahoma; font-size: 8pt; font-weight: normal; vertical-align: middle; border-top-color: black; border-right-color: black; border-bottom-color: black; border-left-color: black; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px; border-top-style: dotted; border-right-style: dotted; border-bottom-style: dotted; border-left-style: dotted; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFB22222 , endColorstr=#FFB22222, GradientType=1); background-color: firebrick;" unselectable="on" y="2016" m="4" cssName="WCR2_InboundCellStyle" d="18">

<div style="width: 100%; text-align: center;">
<div style="display:inline-block;" >
<ISWebEssentials:WebCalendar ID="WebCalendar1" runat="server" HighlightTodayDate="false" Height="540px" Width="685px" CalendarItemWidth="170px"
CalendarItemHeight="187px" EnableMultipleSelection="True" EnableKeyboardSupport="true" NumberOfCalendarDisplayed="12" ShowWeekNumbers="false">
<HeaderStyle BackColor="White" Font-Bold="true" Font-Names="Franklin Gothic Demi Cond" Font-Size="12pt" HorizontalAlign="Center">
</HeaderStyle>
<TableStyle BorderColor="#CCCCCC" BorderStyle="Solid" BorderWidth="1px">
</TableStyle>
<FrameStyle Font-Names="Segoe UI, Tahoma" BorderStyle="None" BackColor="White">
</FrameStyle>
<WeekNameStyle Font-Names="Segoe UI, Tahoma" Font-Bold="true" BackColor="#e5e5e5" HorizontalAlign="Center">
</WeekNameStyle>
<SelectedCellStyle BackColor="Firebrick" HorizontalAlign="Center"></SelectedCellStyle>
</ISWebEssentials:WebCalendar>
</div>
</div>

Hi Erwin,
As per your suggestion I removed AutoHeight property from Dynamic Grid and changed DynamicGrid Height same as panel ie, 450 px.
Now issues are nearly same as earlier
First Grid height is proper. But third grid height is not proper; although it has 12 rows but its height is somehow adjusted like second grid which has 1 row only. Rest of grid's height are also not proper.

I am attaching modified sample and screenshot of pages .

regards
Sachin