JSFiddle - React, Tailwind, and code Playground

by jmansa

HTML

<link rel="stylesheet" href="http://demo.mobiscroll.com/Content/css/mobiscroll-2.0.2.full.min.css">
<script src="http://demo.mobiscroll.com/Content/js/mobiscroll-2.0.2.full.min.js"></script>
<input ID="i" />

JavaScript

$(function(){
    
    $('#groupCalendar').mobiscroll().calendar({
        theme: 'jqm',
        display: 'bottom',
        layout: 'liquid',
        markedDisplay: 'bottom',
        events: [
            { d: '19/2', text: 'Dexter BD', color: 'green' },
            { d: '8/2', text: 'Luke BD', color: 'green' }
        ]
    });
    
    var whl1 = {'1_Value1':'1_Value1',
                '1_Value2':'1_Value2', 
                '1_Value3':'1_Value3',
                '1_Value4':'1_Value4', 
                '1_Value5':'1_Value5', 
                '1_Value6':'1_Value6',
                '1_Value7':'1_Value7'};
    
    var whl2 = {'2_Value1':'2_Value1',
                '2_Value2':'2_Value2', 
                '2_Value3':'2_Value3',
                '2_Value4':'2_Value4', 
                '2_Value5':'2_Value5'};
    
    var wheel = [{},{}];
    
    wheel[0]['Wheel1'] = whl1;
    wheel[1]['Wheel2'] = whl2;

    $('#i').scroller({
        display: 'modal',
        mode: 'scroller',
        wheels: wheel,
        height: 40
    });    
});