Scrollable days for an event

0
Hello, I found in the Mendix Gallery an interesting idea of presenting appointments ( homecare ). The scrollable days is something I like to use in my app: Does somebody wants to share how this can be done?   Thanks, Peter.
asked
2 answers
0

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.

 

answered
0

Hi,

a solution would be:

- customize your listview/template grid with

- use  widget called perfect scrollbar for horizontal scrolling

answered