Hi,
I am creating a calendar and when selecting the date and changing the month, the selection continues on the date selected before. I would like the selection to be changed to the first date. How can I do this?
I’m based on this example: https://github.com/fusetools/fuse-samples/tree/master/Samples/UIStructure/CalendarNav
This is my Grid where the change of months is accomplished:
<Grid Dock="Top" Columns="auto,1*,auto" CellSpacing="5" Margin="0,0,0,5" Width="90%" Height="10%">
<Panel Color="{Resource ColorWhite}" Width="35" Height="35">
<Image File="../Assets/arrowleft.png" Width="20" Color="{Resource ColorTextPrime}"/>
<Clicked>
<ModifyRoute Bookmark="prevMonth" Style="fromLeft"/>
</Clicked>
</Panel>
<Panel Color="{Resource ColorWhite}">
<Text FontSize="20" Color="{Resource ColorTextPrime}" Value="{toUpper({monthLabel})}" TextAlignment="Center" Alignment="VerticalCenter" Font="OpenBold"/>
</Panel>
<Panel Color="{Resource ColorWhite}" Width="35" Height="35">
<Image File="../Assets/arrowright.png" Width="20" Color="{Resource ColorTextPrime}"/>
<Clicked>
<ModifyRoute Bookmark="nextMonth" Style="fromRight"/>
</Clicked>
</Panel>
</Grid>
This is my Grid with the days of months:
<Grid ColumnCount="7" CellSpacing="3" DefaultRow="1*" Rows="auto" Height="70%" Width="90%" Alignment="TopCenter">
<Each Items="{daysOfWeek}">
<Panel Color="{Resource ColorWhite}">
<Text FontSize="15" Value="{= data()}" TextAlignment="Center" Color="Resource ColorDark"/>
</Panel>
</Each>
<Each Items="{days}" MatchKey="type">
<Rectangle ux:Template="fill"/>
<Circle ux:Name="CircleDay" Color="{Resource ColorWhite}" ux:Template="day" Width="80%" Clicked="{openDay}">
<Stroke Color="Resource ColorDark" />
<Selectable ux:Name="Select" Value="{dayOfMonth}" />
<Text ux:Name="TextDay" FontSize="15" Color="#222" Alignment="Center"
Value="{dayOfMonth}" Margin="5" Font="OpenLight">
<WhileSelected>
<Change CircleDay.Color="Resource ColorDark" Duration=".3" />
<Change TextDay.Color="Resource ColorWhite" Duration=".3" />
</WhileSelected>
</Text>
<Deselected>
<Scale Factor=".8" Duration="0.2" Easing="QuadraticInOut"/>
</Deselected>
<Tapped>
<Scale Factor="1.2" Duration="0.3" Easing="CubicIn"/>
<ToggleSelection />
</Tapped>
</Circle>
</Each>
</Grid>