get the arg value of what we are traversing with scrollview

How-to Discussions
1

hi guys, i built an horizontal date scroller using scrollView with AllowedScrollDirections="Horizontal" and selection api, is that possible to get the arg value of what we are traversing while using scrollview ? i want to display the month of each date so when we scroll the month change automatically on the ux.

this is y complete reproduction.

<App>
	<JavaScript>

	var Observable = require("FuseJS/Observable")

	function loadHoursForm(date, dateNumber) {
  var self = this;
  this.date = date;
  this.dateNumber = dateNumber
}

var AllHours = Observable(),
selections = Observable();

function laodHours(){
  var startDate = new Date(),
   endDate = new Date(startDate.getTime() + 50*24*60*60*1000),
   allDate = [];

   for (var iDate = new Date(startDate); iDate < endDate; iDate.setDate(iDate.getDate() + 1)) {
     //console.log(JSON.stringify(iDate.toJSON()))
       allDate.push(iDate.toJSON())
   }

 var all =  allDate.map(function(x){
		 return {date: x, dateNumber: new Date(x).getDate()}
	 })


  AllHours.refreshAll(all,
    function(oldItem, newItem){
      return oldItem.date  = newItem.date
    },
    function(oldItem, newItem){

    },
    function(newItem){
      return new loadHoursForm(newItem.date, newItem.dateNumber)
    }
  )
}

laodHours()






	module.exports = {
		AllHours: AllHours,
		laodHours: laodHours

	}
	</JavaScript>
	<ClientPanel>
		<Panel HitTestMode="LocalBounds" ux:Class="CirclePanel">
		  <string ux:Property="CircleText"/>
		  <string ux:Property="SelectableValue"/>
		  <Selectable Value="{ReadProperty this.SelectableValue}"/>

		  <WhileSelected>
		    <Change CircleB.Color="Black"/>
		    <Change CircleTitle.TextColor="White"/>
		</WhileSelected>
		  <Tapped>
		      <ToggleSelection/>
		  </Tapped>

		  <Circle Height="25" ux:Name="CircleB" Width="25">
		    <Stroke Brush="#333"   Width="1"/>
		    <Text ux:Name="CircleTitle" Value="{Property this.CircleText}" FontSize="13" Alignment="Center" TextAlignment="Center"/>
		  </Circle>
		</Panel>
		<DockPanel Height="50" Dock="Top" Alignment="Top">
			<Panel>
				<ScrollView  ScrollPositionChanged="{djjdh}" AllowedScrollDirections="Horizontal">
					<StackPanel Margin="10,0,0,0" Orientation="Horizontal" ItemSpacing="20">
						<Selection  MaxCount="1" Value="{selections}" SelectionChanged="{SelectionsChange}"/>
						<Each Items="{AllHours}">
							<CirclePanel SelectableValue="{date}" CircleText="{dateNumber}"/>
						</Each>
					</StackPanel>
				</ScrollView>
			</Panel>
			<Rectangle Height="50" Width="120" Layer="Overlay" Dock="Right" Alignment="Right" Color="#ffffffD9">
				<Text Value="{month}" Alignment="Center" FontSize="13"/>
			</Rectangle>
			<Rectangle Layer="Background" Alignment="Bottom" Height="1" Color="#eee"/>
		</DockPanel>
	</ClientPanel>
</App>