Change Selectable after page change/modify route


#1

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>

#2

Hi Samuel,

it’s very hard to understand what you’re trying to achieve from that description. Plus, you’re only sharing some UX code, when business logic should be handled in JavaScript.

Please prepare and share a complete, minimal reproduction that shows the very basics of what you’re trying to do, and we can take it from there.