Asp.net - calendar control and 2 gridview controls

See more:

ASP.NET

Gridview

calendar

I have a web page with 3 controls:

* Calendar control
* Gridview control for games (uses SqlDataSource1, set to a stored procedure that requires 1 parameter: date)
* Gridview control for videos (uses SqlDataSource2, set to a stored procedure that required 1 parameter: gameID)

This is my intended functionality:
* only control visible at start-up is the calendar control
* user selects a date from the calendar control
* the Game gridview becomes visible, showing games on the date the user selected in the Calendar control
* the user selects a row in the Games gridview
* the Video gridview becomes visible, showing available videos for the game

If I remove the Calendar control, the functionality between the Games gridview and the Videos gridview works as intended:

<asp:GridView ID="GridView1" DataSourceID="SqlDataSource1" DataKeyNames="GameID" AutoGenerateSelectButton="True" runat="server" />

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:myConnectionString %>" SelectCommand="usp_SeasonSchedule_GetGamesByDate" SelectCommandType="StoredProcedure">
    <SelectParameters>
        <asp:Parameter DefaultValue="07-Oct-15" Name="date" Type="DateTime" />
    </SelectParameters>
</asp:SqlDataSource> 

<asp:GridView ID="GridView2" runat="server" DataSourceID="SqlDataSource2" />

<asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$Connectionstrings:myConnectionString%>" SelectCommand="usp_Videos_GetVideoForGame" SelectCommandType="StoredProcedure" runat="server">
	<SelectParameters>
		<asp:ControlParameter Name="GameID" ControlID="GridView1"/>
	</SelectParameters>
</asp:SqlDataSource>

However, when I add the Calendar control, and change the datasource of the Games gridview to be dependent on the date selected in the Calendar control, the Video gridview no longer works

<asp:Calendar ID="Calendar1" runat="server"></asp:Calendar>

<asp:GridView ID="GridView1" DataSourceID="SqlDataSource1" DataKeyNames="GameID" AutoGenerateSelectButton="True" runat="server" />

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:myConnectionString %>" SelectCommand="usp_SeasonSchedule_GetGamesByDate" SelectCommandType="StoredProcedure">
    <SelectParameters>
        <asp:ControlParameter ControlID="Calendar1" DefaultValue="" Name="date" PropertyName="SelectedDate" Type="DateTime" />
    </SelectParameters>
</asp:SqlDataSource> 

<asp:GridView ID="GridView2" runat="server" DataSourceID="SqlDataSource2" />
    <asp:SqlDataSource ID="SqlDataSource2" ConnectionString="<%$Connectionstrings:myConnectionString%>" SelectCommand="usp_Videos_GetVideoForGame" SelectCommandType="StoredProcedure" runat="server">
    <SelectParameters>
        <asp:ControlParameter Name="GameID" ControlID="GridView1"/>
    </SelectParameters>
</asp:SqlDataSource>

Where am I going wrong?

What I have tried:

Microsoft's tutorial: Tutorial 10: Master/Detail Using a Selectable Master GridView with a Details DetailView (https://msdn.microsoft.com/en-us/library/aa581796.aspx)