thetool/Layout/default/CalendarTemplate/Form.php

<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/header.php"); ?>
    <link href="<?= self::getResourcePath() ?>assets/css/select2-cstm.css?<?= date('U') ?>" rel="stylesheet"
          type="text/css"/>
    <style>
        .btn-sm {
            padding: .1rem .5rem;
            font-size: .9rem;
            line-height: 1.5;
            border-radius: .15rem;
        }
    </style>
    <!-- start page title -->
    <div class="row">
        <div class="col-12">
            <div class="page-title-box">
                <div class="page-title-right">
                    <ol class="breadcrumb m-0">
                        <li class="breadcrumb-item"><a href="<?= self::getUrl("Dashboard") ?>"><?= MFAPPNAME_SLUG ?></a>
                        </li>
                        <li class="breadcrumb-item"><a
                                    href="<?= self::getUrl("CalendarTemplate") ?>">Vorlagen</a></li>
                        <li class="breadcrumb-item active"><?= ($calendartemplates->id) ? "bearbeiten" : "Neu" ?></li>

                    </ol>
                </div>
                <h4 class="page-title"><?= ($calendartemplates->id) ? "Vorlage bearbeiten" : "Neuer Vorlage" ?></h4>
            </div>
        </div>
    </div>
    <!-- end page title -->
    <div class="row">
        <div class="col-lg-12">

            <div class="card bg-light">
                <div class="card-body">
                    <h4 class="header-title mb-2"><?= ($calendartemplates->id) ? "Vorlage bearbeiten" : "Neuer Vorlage" ?></h4>

                    <form class="form-horizontal" method="post"
                          action="<?= self::getUrl("CalendarTemplate", "save") ?>">
                        <div class="card no-shadow">
                            <div class="card-body">
                                <input type="hidden" name="id" value="<?= $calendartemplates->id ?>"/>
                                <div class="form-group row">
                                    <label class="col-lg-2 col-form-label" for="event_type">Termintyp</label>
                                    <div class="col-lg-3">
                                        <select class="select2 form-control " name="event_type" id="event_type">
                                            <?php foreach (CalendarTemplateModel::$calendarTemplateEventTypes as $key => $value): ?>
                                                <option value="<?= $key ?>" <?= ($calendartemplates->event_type == $key) ? 'selected="selected"' : '' ?>><?= $value ?></option>
                                            <?php endforeach; ?>
                                        </select>
                                    </div>

                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-2 col-form-label" for="name">Vorlagen Name</label>
                                    <div class="col-lg-3">
                                        <input type="text" id="name" name="name" class="form-control"
                                               value="<?= $calendartemplates->name ?>"/>
                                    </div>
                                </div>
                                <div class="form-group row">
                                    <label class="col-lg-2 col-form-label" for="is_reminder">Reminder</label>
                                    <div class="col-lg-3">
                                        <div class="form-check mt-1">
                                            <input class="form-check-input" <?= ($calendartemplates->is_reminder) ? 'checked="checked"' : '' ?> type="checkbox" name="is_reminder" id="is_reminder" value="1">
                                        </div>
                                    </div>
                                </div>
                                <div class="form-group row">

                                    <label class="col-lg-2 col-form-label" for="text">Vorlagen Text</label>
                                    <div class="col-lg-3">
                                        <div class="snippet-buttons mb-1">
                                            <button class="btn btn-info btn-sm" type="button" data-snippet="[&&date&&]"
                                                    title="Datum des Termins">Datum
                                            </button>
                                            <button class="btn btn-info btn-sm" type="button" data-snippet="[&&start&&]"
                                                    title="Start Uhrzeit des Termins">Start
                                            </button>
                                            <button class="btn btn-info btn-sm" type="button" data-snippet="[&&end&&]"
                                                    title="End Uhrzeit des Termins">Ende
                                            </button>
                                            <button class="btn btn-info btn-sm" type="button" data-snippet="[&&vmnm&&]"
                                                    title="Dynamisch Vormittag/Nachmittags je nach Termin begin">dyn.
                                                VM/NM
                                            </button>
                                        </div>
                                        <textarea id="text" name="text" style="height: 200px;"
                                                  class="form-control"><?= $calendartemplates->text ?></textarea>
                                    </div>
                                    <div class="col-lg-4">
                                        <h5 id="preview-info" data-date="<?= date('d.m.Y', strtotime('+1 day')) ?>"
                                            data-start="08:00" data-end="10:00" data-dynvmnm="vormittags"
                                            class="pt-0 mt-0">Vorschau für Beispieltermin: <span
                                                    class="font-14 font-weight-normal"><?= date('d.m.Y', strtotime('+1 day')) . " 08:00 - 10:00" ?></span>
                                        </h5>
                                        <div id="text-preview"></div>
                                    </div>
                                </div>

                            </div>
                        </div>
                        <div class="form-group row">
                            <label class="col-lg-2"></label>
                            <div class="col-lg-10">
                                <button type="submit" class="btn btn-primary">Speichern</button>
                                <a href="<?= self::getUrl("Calendar") ?>">
                                    <button type="button" class="btn btn-secondary">Abbrechen</button>
                                </a>
                            </div>
                        </div>


                    </form>
                </div>
            </div>

        </div>
    </div>

    <script type="text/javascript">
        $(".select2").select2({placeholder: ""});

        // disable mousewheel on a input number field when in focus
        $('form').on('focus', 'input[type=number]', function (e) {
            $(this).on('wheel.disableScroll', function (e) {
                e.preventDefault()
            })
        });
        $('form').on('blur', 'input[type=number]', function (e) {
            $(this).off('wheel.disableScroll')
        });
        $(document).ready(function () {
            function preview() {
                let text = $("#text").val();
                text = text.replace(/\[&&vmnm&&\]/g, $("#preview-info").data("dynvmnm"));
                text = text.replace(/\[&&date&&\]/g, $("#preview-info").data("date"));
                text = text.replace(/\[&&start&&\]/g, $("#preview-info").data("start"));
                text = text.replace(/\[&&end&&\]/g, $("#preview-info").data("end"));
                text = text.replace(/\n/g, "<br>");
                $("#text-preview").html(text);
            }
            $("#text").on("keyup blur change focus", preview);
            preview();
            $('.snippet-buttons button').on('click', function () {
                var snippet = $(this).data('snippet');
                insertAtCursor('#text', snippet);
                $('#text').focus();
            });

            function insertAtCursor(textareaSelector, text) {
                var textarea = $(textareaSelector)[0];
                var start = textarea.selectionStart;
                var end = textarea.selectionEnd;
                var value = textarea.value;

                // Text vor und nach der Cursorposition
                var before = value.substring(0, start);
                var after = value.substring(end, value.length);

                // Neuen Wert setzen
                textarea.value = before + text + after;

                // Cursorposition setzen
                var cursorPosition = start + text.length;
                textarea.selectionStart = textarea.selectionEnd = cursorPosition;
            }

        });
    </script>

<?php include(realpath(dirname(__FILE__) . "/../../$mfLayoutPackage") . "/footer.php"); ?>