webadmin.php

/var/www/hkosl.com/imusiccircle/webadmin/calendar_index.php

<?php
    //not specific setting
    $page_settings = array(
        'formid'     => 'Calendar', // for permission
        'section'    => 'Master', // parent/page title
        'subsection' => 'Calendar', // page title
        'domain'     => 'calendar', // table/model name
        'access'     => 'GNr', // for permission
    );
    require_once "check_login.php";

    //get lesson from order detail
    $events      = array();
    $sql         = "select profile_id,user_id
            from `profile_user` as tb where user_id = ? and deleted = ? LIMIT 1";
    $parameters  = array($_SESSION['cmsloginid'], 0);
    $row_profile = bind_pdo($sql, $parameters, "selectone");

    $where_clause = "";

    if ($row_profile['profile_id'] == 1 || $row_profile['profile_id'] == 2) {
        $where_clause = "`order`.status = ? and `order`.deleted = ?";
        $parameters   = array("paid", 0);
    } else if ($row_profile['profile_id'] == 3 || $row_profile['profile_id'] == 4) {
        if ($row_profile['profile_id'] == 3) {
            $where_clause = "`order`.tutormain_id = ? and `order`.status = ? and `order`.deleted = ?";
            $parameters   = array($_SESSION["member_login"], "paid", 0);
        } else if ($row_profile['profile_id'] == 4) {
            $where_clause = "`order`.studentmain_id = ? and `order`.status = ? and `order`.deleted = ?";
            $parameters   = array($_SESSION["student_login"], "paid", 0);
        }
    }

    $sql = "select mt1.name_" . $_SESSION["wlangcode"] . " as instrument_name, mt2.name_" . $_SESSION["wlangcode"] . " as level_name, `order`.course_length, `order`.id as order_id, order_detail.datetime, order_detail.tutor_status, order_detail.id as order_detail_id
    from order_detail
    INNER JOIN `order` ON `order`.id = order_detail.order_id
    INNER JOIN student_postjob ON student_postjob.id = `order`.job_id
    INNER JOIN master_type_code mt1 ON mt1.id = student_postjob.mas_instrument
    INNER JOIN master_type_code mt2 ON (mt2.code = `order`.level and mt2.typeid = 'LEVEL_OF_GRADE')
    where {$where_clause}";

    $result = bind_pdo($sql, $parameters, "selectall");

    $i = 0;
    if (!empty($result)) {
        foreach ($result as $key => $row) {
            if(empty($row["course_length"])){
                $row["course_length"] = 0;
            }
            $events[$i]["id"]    = $row["order_detail_id"];
            $events[$i]["title"] = $row["instrument_name"] . " " . _lang("Level") . ": " . $row["level_name"];

            $start               = New DateTime($row["datetime"]);
            $events[$i]["start"] = $start->format("Y-m-d") . "T" . $start->format("H:i:s");

            $end               = $start->modify("+ " . $row["course_length"] . " minutes");

            $events[$i]["end"] = $end->format("Y-m-d") . "T" . $start->format("H:i:s");

            if (date("Y-m-d H:i:s") > $end->format("Y-m-d H:i:s")) {
                $events[$i]["color"] = "grey";
            } else {
                $events[$i]["color"] = "";
            }

            $events[$i]["type"] = "LESSON";

            $i++;
        }
    }

    $sql        = "select * from calendar where deleted = ? and cmsloginid = ?";
    $parameters = array(0, $_SESSION["cmsloginid"]);
    $calendars  = bind_pdo($sql, $parameters, "selectall");

    foreach ($calendars as $row) {
        $events[$i]["id"]    = $row["id"];
        $events[$i]["title"] = $row["title"];

        $start               = New DateTime($row["start"]);
        $events[$i]["start"] = $start->format("Y-m-d") . "T" . $start->format("H:i:s");

        $end               = New DateTime($row["end"]);
        $events[$i]["end"] = $end->format("Y-m-d") . "T" . $end->format("H:i:s");

        if (date("Y-m-d H:i:s") > $end->format("Y-m-d H:i:s")) {
            $events[$i]["color"] = "grey";
        } else {
            $events[$i]["color"] = "";
        }

        $events[$i]["type"] = "EVENT";

        $i++;
    }

?>
<!DOCTYPE html>
<html>
<head>
    <?php require_once "_html_head.php"; ?>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper">
    <?php require_once "_header.php"; ?>
    <?php require_once "_menu.php"; ?>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                <?= _lang($page_settings['subsection']) ?>
                <small>
                    <?= _lang("Index") ?>
                </small>
            </h1>
            <ol class="breadcrumb">
                <li>
                    <?= _lang("Home") ?>
                </li>
                <li class="active"><a href="<?= $page_settings['domain'] ?>_index.php"><i class="fa"></i>
                        <?= _lang($page_settings['subsection']) ?>
                    </a></li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">

            <!-- Your Page Content Here -->

            <!-- main table -->
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">

                        <div class="box-body">
                            <div onclick="add_event_form();" class="btn btn-sm btn-primary pull-right">
                                <?=_lang("Add Event")?></div>

                            <div style="clear: both"></div>

                            <div id="calendar"></div>
                        </div>
                        <!-- /.box-body -->
                    </div>
                    <!-- /.box -->
                </div>
                <!-- /.col -->
            </div>
            <!-- /.row -->

            <!-- End of Your Page Content Here -->

        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->

    <div id="add_event" style="display: none; overflow: hidden;">
        <div class="row">
            <h4 style="text-align: center;">新增事件</h4>
            <div class="col-md-12">
                <label class="required_field">標題</label><br>
                <input class="form-control" type="text" name="title" maxlength="255" id="title" required>
            </div>

            <div class="col-md-12">
                <label class="required_field">開始日期及時間</label><br>
                <input class="form-control datetimepicker" type="text" name="start" maxlength="255" id="start" required>
            </div>

            <div class="col-md-12">
                <label class="required_field">完結日期及時間</label><br>
                <input class="form-control datetimepicker" type="text" name="end" maxlength="255" id="end" required>
            </div>

            <div class="col-md-12 tr">
                <br>
                <button type="button" class="btn btn-primary" onclick="add_event();">提交</button>
            </div>
        </div>
    </div>

    <?php require_once "_footer.php"; ?>
    <?php require_once "_aside.php"; ?>
</div>
<!-- ./wrapper -->

<!-- REQUIRED JS SCRIPTS -->
<?php require_once "_html_script.php"; ?>

<link rel='stylesheet' href='js/fullcalendar-3.0.0/fullcalendar.min.css'/>
<script src='js/fullcalendar-3.0.0/moment.min.js'></script>
<script src='js/fullcalendar-3.0.0/fullcalendar.min.js'></script>
<script src='js/fullcalendar-3.0.0/locale-all.js'></script>
<script src='js/fullcalendar-3.0.0/gcal.js'></script>

<script type="text/javascript">
    $(document).ready(function () {

        var event_json = JSON.parse('<?=json_encode($events)?>');
        console.log(event_json);

        // page is now ready, initialize the calendar...

        $('#calendar').fullCalendar({
            // put your options and callbacks here
            header: {
                right: 'today,prev,next,month,agendaWeek,agendaDay,listMonth'
            },
            //defaultDate: '2016-09-12',
            buttonIcons: false, // show the prev/next text
            weekNumbers: false,
            navLinks: true, // can click day/week names to navigate views
            editable: false,
            eventLimit: true, // allow "more" link when too many events
            displayEventEnd: true,

            locale: '<?=$_SESSION["wlangcode"] == "en" ? "en" : "zh-tw"?>',
            eventClick: function (event, jsEvent, view) {
                if(event.type=="LESSON"){
                    window.open("course_form.php?id=" + event.id);
                }else{
                    window.open("calendar_form.php?id=" + event.id);
                }

                $(".fc-content").css({"white-space": "normal !important", "cursor": "pointer !important"});

            },
            dayClick: function (event, jsEvent, view) {
                //console.log(1);
                //add_event_form();
            },
            events: event_json
        })

    });
</script>

<link rel="stylesheet" href="../js/fancybox/jquery.fancybox.css?v=2.1.5" type="text/css" media="screen"/>
<script type="text/javascript" src="../js/fancybox/jquery.fancybox.pack.js?v=2.1.5"></script>

<script type="text/javascript" src="js/jquery-ui-1.11.4/jquery-ui.min.js"></script>
<link rel="stylesheet" href="js/jquery-ui-1.11.4/jquery-ui.min.css">
<script type="text/javascript" src="js/jquery-ui-sliderAccess.js"></script>
<script type="text/javascript" src="js/jquery-ui-timepicker-addon.js"></script>
<link type="text/css" href="css/jquery-ui-timepicker-addon.css" rel="stylesheet"/>

<script type="text/javascript">

    function add_event_form() {
        $("#title").val("");
        $("#start").val("");
        $("#end").val("");

        $.fancybox({
            //settings
            'type': 'inline',
            'fitToView': false,
            'maxHeight': 280,
            'width': '60%',
            'height': '50%',
            'autoSize': false,
            'closeClick': false,
            'openEffect': 'none',
            'closeEffect': 'none',
            'href': '#add_event'
        });
    }

    function add_event() {
        var title = $("#title").val();
        var start = $("#start").val();
        var end = $("#end").val();

        if (title && start && end) {
            jQuery.ajax({
                url: '_ajax.php',
                type: 'POST',
                data: {
                    ajax: "add_event",
                    title: title,
                    start: start,
                    end: end,
                },
                dataType: 'html', //dataType (default: Intelligent Guess (xml, json, script, or html))
                timeout: 10000,
                error: function (result) {
                    //alert('Error Occur. Please refresh and try again.');
                    console.log(result.responseText);
                },
                success: function (result) {
                    //$('#loading').slideUp(100);
                    //console.log(result);
                    /*var json = result,
                     obj = JSON.parse(json);*/

                    //alert(result);
                    if (result == "success") {
                        location.reload();
                    } else {
                        alert(result);
                    }
                }
            });
        } else {
            alert("請輸入標題，開始日期時間及完結日期時間。");
        }

    }

    $(function () {
        var opt = {
            //
            dayNames: ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"],
            dayNamesMin: ["日", "一", "二", "三", "四", "五", "六"],
            monthNames: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            monthNamesShort: ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"],
            prevText: "上月",
            nextText: "次月",
            weekHeader: "週",
            timeOnlyTitle: "選擇時分秒",
            timeText: "時間",
            hourText: "時",
            minuteText: "分",
            secondText: "秒",
            millisecText: "毫秒",
            timezoneText: "時區",
            currentText: "現在時間",
            closeText: "確定",
            amNames: ["上午", "AM", "A"],
            pmNames: ["下午", "PM", "P"],
            //
            dateFormat: 'yy-mm-dd',
            stepMinute: 5,
            timeFormat: 'HH:mm:ss',
            //minDate: 0
        };
        $(".datetimepicker").datetimepicker(opt);

    });
</script>
</body>
</html>