.

VaKeR CYBER ARMY

Server : Apache/2.4.41 (Ubuntu)
System : Linux absol.cf 5.4.0-198-generic #218-Ubuntu SMP Fri Sep 27 20:18:53 UTC 2024 x86_64
User : www-data ( 33)
PHP Version : 7.4.33
Disable Function : pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_get_handler,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,pcntl_async_signals,pcntl_unshare,
Directory : /var/www/html/libs/absol-acomp/demo/

Upload File :

Current File : /var/www/html/libs/absol-acomp/demo/calendar.html

<!DOCTYPE html>
<html>

<head>
    <title>Calendar</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://absol.cf/hightlight/styles/default.css">
    <!-- <link rel="stylesheet" href="https://absol.cf/materialdesignicons/materialdesignicons.min.css"> -->
    <script src="../dist/absol-acomp.js?<?php  echo stat('../dist/absol-acomp.js')['mtime'];?>"></script>

    <script src="https://absol.cf/hightlight/highlight.pack.js"></script>
    <style>
        :root {
            font-size: 14px;
        }

        .dark.bg {
            background-color: rgba(30, 30, 32, 1);
            /* background-color: white; */
            color: white;

        }

        .bg {
            padding-top: 20px;
            padding-bottom: 20px;
            border: solid 1px rgb(30, 30, 32);
        }
    </style>
</head>

<body>
<h1>Calendar</h1>

<div class="absol-bscroller" style="height: 400px;">
</div>

<script class="viewable">
    var _ = absol._;
    var $ = absol.$;
    var scroller = $('.absol-bscroller');
    var now = new Date();
    mnD = new Date(now.getTime() - absol.datetime.MILLIS_PER_DAY * 32);
    mxD = new Date(now.getTime() + absol.datetime.MILLIS_PER_DAY * 32);
    _({
        tag: 'chromecalendar',
        props: {
            selectedDates: new Date(),
            minLimitDate: new Date(2022, 11, 23),
            maxLimitDate: new Date(2023, 11, 3)
        },
        on: {
            pick: function(){
                console.log(this.selectedDates);
            }
        }
    }).addTo(scroller);

    _({
        tag: 'chromecalendar',
        props: {
            level: 'week',
            startDayOfWeek: 1,
            selectedDates: now,
            minLimitDate: new Date(2021, 0, 1),
            maxLimitDate: mxD
        },
        on: {
            pick: function(){
                console.log(this.selectedDates);
            }
        }
    }).addTo(scroller);

    _({
        tag: 'chromecalendar',
        props: {
            level: 'month',
            minLimitDate: new Date(2022, 7, 3),
            maxLimitDate: new Date(2023, 11, 3),
            selectedDates: [new Date()]
        },
        style: {
            marginLeft: '10px'
        },
        on: {
            pick: function(){
                console.log(this.selectedDates);
            }
        }
    }).addTo(scroller);

    _({
        tag: 'chromecalendar',
        props: {
            level: 'quarter',
            minLimitDate: new Date(2022, 7, 3),
            maxLimitDate: new Date(2023, 11, 3),
            selectedDates: [new Date()]
        },
        style: {
            marginLeft: '10px'
        },
        on: {
            pick: function(){
                console.log(this.selectedDates);
            }
        }
    }).addTo(scroller);

    _({
        tag: 'chromecalendar',
        props: {
            level: 'year',
            minLimitDate: new Date(2005, 7, 3),
            maxLimitDate: new Date(2022, 11, 3),
            debug: true
        },
        style: {
            marginLeft: '10px'
        },
        on: {
            pick: function(){
                console.log(this.selectedDates);
            }
        }
    }).addTo(scroller);

    _({
        tag: 'chrometimepicker',
        props: {
            dayOffset: new Date()
        },
        style: {
            marginLeft: '10px'
        },
        on: {
            pick: function(){
                console.log(this.selectedDates);
            }
        }
    }).addTo(scroller);

    _({
        tag: 'chrometimepicker',
        props: {
            dayOffset: null
        },
        style: {
            marginLeft: '10px'
        },
        on: {
            pick: function(){
                console.log(this.selectedDates);
            }
        }
    }).addTo(scroller);


</script>

<h1>Quick Calendar</h1>

<button id="qc-btn">Open QuickCalendar</button>
<span id="qc-value"></span>
<script class="viewable">
    absol.ChromeCalendar.showWhenClick(
        $('#qc-btn'),
        new Date(2018, 1, 1),
        'auto',
        function (date) {
            $('#qc-value').innerHTML = date.toLocaleDateString();
        }
    );
</script>

<h1>Calendar Input</h1>
<div id="min-max-inputs">
    <label id="min-lb">Min </label><input id="min-ip"/>
    <label id="max-lb"> Max </label><input id="max-ip"/>
    <label id="disabled-lb"> Disabled </label><input id="disabled-ip"/>
</div>
<script class="viewable">
    var mmInputs = $('#min-max-inputs');
    var minValue = new Date(2019, 0, 1);
    var maxValue = new Date(2020, 0, 1)
    var minIp = absol._(
        {
            tag: 'calendarinput',
            props: {
                value: minValue,
                maxLimitDate: maxValue
            },
            on: {
                change: function (ev) {
                    maxIp.minLimitDate = ev.value;
                }
            }
        }
    );
    var maxIp = absol._(
        {
            tag: 'calendarinput',
            props: {
                value: maxValue,
                minLimitDate: minValue,
                dateToString: 'mmm-dd-yyyy'
            },
            on: {
                change: function (ev) {
                    minIp.maxLimitDate = ev.value;
                }
            }
        }
    );
    $('#min-ip', mmInputs).selfReplace(minIp);
    $('#max-ip', mmInputs).selfReplace(maxIp);
    $('#disabled-ip', mmInputs).selfReplace(_({
        tag: 'calendarinput',
        props: {
            // value: maxValue,
            minLimitDate: minValue,
            disabled: true
        }
    }));

</script>

<script src="https://absol.cf/absol/demo/autohightlighting.js"></script>

</body>

</html>

VaKeR 2022