博客

jQWidgets jqxScheduler touchDayNameFormat属性

  • Post category:jquery

当在移动设备上使用jQWidgets jqxScheduler组件时，touchDayNameFormat属性可以用于设置在日程表周视图中显示的星期几的格式。下面是对这个属性的详细解释以及示例说明。

1. touchDayNameFormat属性

简介

touchDayNameFormat属性是在jQWidgets jqxScheduler组件中用于设置周视图中显示星期几格式的属性。

取值

touchDayNameFormat属性可以取值为字符串。

默认值

默认情况下，touchDayNameFormat属性的值为‘ddd’，表示在日程表中显示星期几的缩写，例如‘Mon’。

说明

touchDayNameFormat属性可以用于设置在日程表周视图中显示的星期几的格式。

代码示例

以下代码设置在日程表周视图中显示星期几的全称：

$('#scheduler').jqxScheduler({
    touchDayNameFormat: "dddd"
});

以下代码设置在日程表周视图中显示星期几的数字编号：

$('#scheduler').jqxScheduler({
    touchDayNameFormat: "d"
});

2. 示例说明

示例1

以下是一个简单的示例，在日程表周视图中显示星期几的全称：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQWidgets jqxScheduler touchDayNameFormat属性示例1</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqxwidgets@11.0.0/jqx-all.js"></script>
</head>
<body>
    <div id="scheduler"></div>
    <script>
        $(document).ready(function () {
            var source = {
                dataType: 'json',
                dataFields: [
                    { name: 'id', type: 'string' },
                    { name: 'description', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'subject', type: 'string' },
                    { name: 'calendar', type: 'string' },
                    { name: 'start', type: 'date' },
                    { name: 'end', type: 'date' }
                ],
                id: 'id',
                url: '../sampledata/events.txt'
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(),
                width: 850,
                height: 600,
                source: adapter,
                showLegend: true,
                touchDayNameFormat: "dddd",
                view: 'weekView',
                viewDays: 7,
                ready: function () {
                    $("#scheduler").jqxScheduler('ensureAppointmentVisible', '4');
                },
                resources:
                {
                    colorScheme: "scheme05",
                    dataField: "calendar",
                    source: new $.jqx.dataAdapter(source)
                },
                appointmentDataFields:
                {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "place",
                    subject: "subject",
                    resourceId: "calendar"
                },
                views:
                [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
        });
    </script>
</body>
</html>

示例2

以下是另外一个简单的示例，在日程表周视图中显示星期几的数字编号：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>jQWidgets jqxScheduler touchDayNameFormat属性示例2</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/jqxwidgets@11.0.0/jqx-all.js"></script>
</head>
<body>
    <div id="scheduler"></div>
    <script>
        $(document).ready(function () {
            var source = {
                dataType: 'json',
                dataFields: [
                    { name: 'id', type: 'string' },
                    { name: 'description', type: 'string' },
                    { name: 'location', type: 'string' },
                    { name: 'subject', type: 'string' },
                    { name: 'calendar', type: 'string' },
                    { name: 'start', type: 'date' },
                    { name: 'end', type: 'date' }
                ],
                id: 'id',
                url: '../sampledata/events.txt'
            };
            var adapter = new $.jqx.dataAdapter(source);
            $("#scheduler").jqxScheduler({
                date: new $.jqx.date(),
                width: 850,
                height: 600,
                source: adapter,
                showLegend: true,
                touchDayNameFormat: "d",
                view: 'weekView',
                viewDays: 7,
                ready: function () {
                    $("#scheduler").jqxScheduler('ensureAppointmentVisible', '4');
                },
                resources:
                {
                    colorScheme: "scheme05",
                    dataField: "calendar",
                    source: new $.jqx.dataAdapter(source)
                },
                appointmentDataFields:
                {
                    from: "start",
                    to: "end",
                    id: "id",
                    description: "description",
                    location: "place",
                    subject: "subject",
                    resourceId: "calendar"
                },
                views:
                [
                    'dayView',
                    'weekView',
                    'monthView'
                ]
            });
        });
    </script>
</body>
</html>

以上就是关于“jQWidgets jqxScheduler touchDayNameFormat属性”的完整攻略和示例说明，希望对你有所帮助。

Tags: