Hi Peter,
This is implemented using a listview to display the dates. So i just store 10 days in my application and show this in a listview.
Here is the full sass for the day selector:
.days-selector{
white-space: nowrap;
overflow-y: hidden;
overflow-x: scroll;
-webkit-overflow-scrolling: touch;
background: #fff;
padding: 12px 0;
margin-bottom: 5px !important;
box-shadow: $z-depth-1;
&::-webkit-scrollbar {
width: 0;
height: 0;
background: transparent;
}
li.mx-listview-item{
display:inline-block;
border: 0;
padding: 0;
cursor: pointer;
margin: 0;
border-radius: 0 !important;
&:first-child{
margin-left: 0;
}
&:hover, &:focus{
outline:none;
border:none;
}
&:last-child{
border:none;
}
&.selected{
.circle-day-selector{
background: $brand-primary;
}
}
.circle-day-selector{
border-radius: 50%;
width: 62px;
height: 62px;
padding: 2px;
border: 0;
//background: radial-gradient(ellipse at 70% 70%,#ee583f 8%,#d92d77 42%,#bd3381 58%);
background: $brand-default;
margin: 0 6px;
cursor: pointer;
.day-container{
background: #efefef;
border-radius: 50%;
height: 100%;
width: 100%;
border: 2px solid #fff;
color: rgba(0, 0, 0, 0.54);
}
&.selected-date{
background: $brand-primary;
.day-container{
background: $brand-primary;
color: #fff;
}
}
&.no-appointment{
background: $brand-default !important;
&.selected-date{
background: $brand-default !important;
}
.day-container{
background: #fff;
color: $brand-default;
}
cursor: none;
&:after{
display: none;
}
&:hover, &:focus{
background: transparent;
}
}
&.current-day{
background: $brand-success;
.day-container{
color: $brand-success;
background: #fff;
}
&.selected-date{
background: $brand-success;
.day-container{
color: #fff;
background: $brand-success;
}
}
}
.btn{
background:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
border:none;
&:active,&:focus{
outline:none;
border:none;
}
}
.day{
display:block;
text-align: center;
font-size: 24px;
position: relative;
top: 3px;
}
.month{
display: block;
text-align: center;
font-size: 14px;
position: relative;
top: -6px;
}
}
}
}
The next part is a bit more tricky. To change the filter in my appointments list i use some javascrip in a javascript buttont:
var gridNode = dojo.query(".mx-name-appointments")[0];
var appointmentCount = dojo.query(".appointments-count")[0];
var day = 'daytoken';
if (gridNode) {
this._grid = dijit.registry.byNode(gridNode);
if (this._grid) {
var datasource = this._grid._datasource;
if(window.device && window.mx.isOffline()){
//offline
if(datasource._constraints.constructor === Array){
datasource._constraints = [];
datasource._constraints.push({attribute:'Day',operator:'equals',path:'Appointments.Appointment',value:day});
}else{
datasource._constraints = [{attribute:'Day',operator:'equals',path:'Appointments.Appointment',value:day}];
}
}
else{
var constraints = "contains(Day,'"+day+"')";
datasource._constraints = "[" + constraints + "]";
}
this._grid.update();
}
else {
console.log("Could not find the list node.");
}
}
This will filter your list whether it's online or offline and use a day attribute to pass to the javascript to filter.
Hi,
a solution would be:
- customize your listview/template grid with
- use widget called perfect scrollbar for horizontal scrolling