Kalenderwochen in der Datumsauswahl von D365 F&O

1/// <summary>2/// Invisible control that enables calendar week numbers in all date pickers of the web client session.3/// </summary>4[FormControlAttribute("BALCalendarWeekNumbers", "/resources/html/BALCalendarWeekNumbers", classStr(BALCalendarWeekNumbersBuild))]5public class BALCalendarWeekNumbersControl extends FormTemplateControl6{7    private const str ControlName = "__BALCalendarWeekNumbers";89    protected void new(FormBuildControl _build, FormRun _formRun)10    {11        super(_build, _formRun);1213        this.setTemplateId("BALCalendarWeekNumbers");14        this.setResourceBundleName("/resources/html/BALCalendarWeekNumbers");15    }1617    /// <summary>18    /// Adds the control to a form at run time, so that week numbers are enabled in every web client19    /// session, independent of the start page.20    /// </summary>21    /// <param name = "_formRun">The form instance.</param>22    public static void addToForm(FormRun _formRun)23    {24        FormDesign formDesign;2526        if (!_formRun || _formRun.isFactBox())27        {28            return;29        }3031        formDesign = _formRun.design();3233        if (formDesign && !formDesign.controlName(ControlName))34        {35            formDesign.addControlEx(classStr(BALCalendarWeekNumbersControl), ControlName);36        }37    }38}

1(function () {2    'use strict';34    var datePickerSelector = '.dyn-datePicker';5    var weekTableClass = 'balCalendarWeekTable';6    var weekAttribute = 'data-bal-calendar-week';7    var weekColorProperty = '--bal-calendar-week-color';8    // Label @BALCalendarWeek:WeekHeader, loaded by the HTML resource in the language of the user.9    var weekHeaderLabel = 'BALCalendarWeek_WeekHeader';10    var daysPerWeek = 7;11    var millisecondsPerDay = 86400000;1213    var weekHeaderText;14    var initialized = false;15    var markPending = false;1617    // Returns the ISO 8601 week number of a local date.18    function isoWeek(date) {19        var thursday = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));20        var yearStart;2122        thursday.setUTCDate(thursday.getUTCDate() + 4 - (thursday.getUTCDay() || daysPerWeek));23        yearStart = Date.UTC(thursday.getUTCFullYear(), 0, 1);2425        return Math.ceil(((thursday - yearStart) / millisecondsPerDay + 1) / daysPerWeek);26    }2728    // A calendar row is labelled with the week of its Monday. Both pickers use this function,29    // so a row shows the same number in a form field and in a grid for every first day of the week.30    function weekOfRow(firstDateOfRow) {31        var monday = new Date(firstDateOfRow.getFullYear(), firstDateOfRow.getMonth(), firstDateOfRow.getDate());3233        monday.setDate(monday.getDate() + (daysPerWeek + 1 - monday.getDay()) % daysPerWeek);3435        return isoWeek(monday);36    }3738    // Parses a date in the format YYYY-MM-DD as a local date.39    function parseIsoDate(dateText) {40        var parts = dateText.split('-');4142        return new Date(+parts[0], +parts[1] - 1, +parts[2]);43    }4445    // Week numbers for the jQuery UI date pickers (date fields on forms and dialogs).46    // jQuery UI calls calculateWeek with the first date of each calendar row.47    function enableJQueryWeekNumbers() {48        if (typeof $ === 'undefined' || !$.datepicker) {49            return;50        }5152        $.datepicker.setDefaults({53            showWeek: true,54            weekHeader: weekHeaderText,55            calculateWeek: weekOfRow56        });57    }5859    function setWeekAttribute(cell, value) {60        if (!value) {61            if (cell.hasAttribute(weekAttribute)) {62                cell.removeAttribute(weekAttribute);63            }64        }65        else if (cell.getAttribute(weekAttribute) !== value) {66            cell.setAttribute(weekAttribute, value);67        }68    }6970    function hasVisibleDay(datedCells) {71        return Array.prototype.some.call(datedCells, function (cell) {72            return !!cell.textContent;73        });74    }7576    // The week number is drawn inside the first day cell and would inherit its colour, which is white77    // on the selected day and grey on a day of another month. It gets the colour of the header instead.78    function setWeekColor(table) {79        var header = table.querySelector('thead');80        var color = header ? window.getComputedStyle(header).color : '';8182        if (color && table.style.getPropertyValue(weekColorProperty) !== color) {83            table.style.setProperty(weekColorProperty, color);84        }85    }8687    function markRow(row) {88        var cells = row.children;89        var datedCells = row.querySelectorAll('[data-date]');9091        if (!cells.length) {92            return;93        }9495        if (!datedCells.length) {96            if (cells.length === daysPerWeek) {97                setWeekAttribute(cells[0], weekHeaderText);98            }99100            return;101        }102103        // The grid picker appends a row without visible days when the month ends on the last weekday.104        if (!hasVisibleDay(datedCells)) {105            setWeekAttribute(cells[0], '');106            return;107        }108109        setWeekAttribute(cells[0], String(weekOfRow(parseIsoDate(datedCells[0].getAttribute('data-date')))));110    }111112    // Week numbers for the date pickers of the grid control. The week number is written as an attribute113    // on the first cell of each row and rendered by CSS, the table structure itself is not changed.114    function markDatePickers() {115        var tables = document.querySelectorAll(datePickerSelector + ' table');116117        Array.prototype.forEach.call(tables, function (table) {118            if (!table.querySelector('[data-date]')) {119                return;120            }121122            if (!table.classList.contains(weekTableClass)) {123                table.classList.add(weekTableClass);124            }125126            setWeekColor(table);127128            Array.prototype.forEach.call(table.querySelectorAll('tr'), markRow);129        });130    }131132    // Marks the open grid date pickers at most once per animation frame; returns immediately if none is open.133    function scheduleMark() {134        if (markPending) {135            return;136        }137138        markPending = true;139140        window.requestAnimationFrame(function () {141            markPending = false;142143            if (document.querySelector(datePickerSelector)) {144                markDatePickers();145            }146        });147    }148149    // The grid picker changes data-date on every cell when the month changes,150    // so text changes do not have to be observed.151    function observeDatePickers() {152        new MutationObserver(scheduleMark).observe(document.body, {153            childList: true,154            subtree: true,155            attributes: true,156            attributeFilter: ['data-date']157        });158159        scheduleMark();160    }161162    // Runs once per browser page, with the first form that carries the control.163    function initialize() {164        if (initialized) {165            return;166        }167168        initialized = true;169        weekHeaderText = $dyn.label(weekHeaderLabel);170171        enableJQueryWeekNumbers();172        observeDatePickers();173    }174175    $dyn.ui.defaults.BALCalendarWeekNumbers = {};176177    $dyn.controls.BALCalendarWeekNumbers = function (data, element) {178        var self = this;179180        $dyn.ui.Control.apply(self, arguments);181        $dyn.ui.applyDefaults(self, data, $dyn.ui.defaults.BALCalendarWeekNumbers);182183        initialize();184    };185186    $dyn.controls.BALCalendarWeekNumbers.prototype = $dyn.extendPrototype($dyn.ui.Control.prototype, {});187})();

1.balCalendarWeekNumbers {2    display: none;3}45/* jQuery UI date pickers (date fields on forms and dialogs) */6.ui-datepicker td.ui-datepicker-week-col {7    vertical-align: middle;8    text-align: center;9    padding-right: 8px;10    opacity: 0.7;11}1213.ui-datepicker th.ui-datepicker-week-col {14    text-align: center;15    padding-right: 8px;16    font-weight: normal;17}1819/* Grid date pickers: the week number is rendered from the data-bal-calendar-week attribute of the first cell */20.balCalendarWeekTable {21    margin-left: 30px;22}2324.balCalendarWeekTable [data-bal-calendar-week] {25    position: relative;26}2728.balCalendarWeekTable [data-bal-calendar-week]::before {29    content: attr(data-bal-calendar-week);30    color: var(--bal-calendar-week-color);31    position: absolute;32    left: -32px;33    width: 26px;34    text-align: center;35    opacity: 0.7;36    font-weight: normal;37    pointer-events: none;38}