dhtmlxScheduler는 다음과 같은 터치 디바이스를 지원합니다:
스케줄러는 스마트폰에서도 동작하지만, 화면 공간이 제한적이므로 일부 수동 설정이 필요할 수 있습니다.
도움이 되는 팁!
<meta name="viewport" content="width=device-width, initial-scale=1">
header 구성 프로퍼티를 사용해 Scheduler를 초기화할 때, 클라이언트의 화면 크기에 맞는 헤더 레이아웃을 선택할 수 있습니다.
이 설정은 작은 화면에 맞춰 요소와 폰트 크기를 조정하는 스타일도 적용합니다.
예를 들어, 헤더를 여러 행으로 분할할 수 있습니다:
위 스크린샷은 작은 화면에서의 Scheduler를 보여줍니다.
이 설정은 동적으로 전환할 수 있으므로, 큰 화면과 작은 화면에 각각 다른 헤더 구성을 정의할 수 있습니다:
// define configs
const compactHeader = {
rows: [
{
cols: [
"prev",
"date",
"next",
]
},
{
cols: [
"day",
"week",
"month",
"spacer",
"today"
]
}
]
};
const fullHeader = [
"day",
"week",
"month",
"date",
"prev",
"today",
"next"
];
// add a switch to select an appropriate config for a current screen size
function resetConfig(){
let header;
if (window.innerWidth < 1000) {
header = compactHeader;
} else {
header = fullHeader;
}
scheduler.config.header = header;
return true;
}
// apply the config initially and each time scheduler repaints or resizes:
resetConfig();
scheduler.attachEvent("onBeforeViewChange", resetConfig);
scheduler.attachEvent("onSchedulerResize", resetConfig);
scheduler.config.responsive_lightbox = true; // responsive lightbox
scheduler.init("scheduler_here");
Related sample: Responsive scheduler
Scheduler API에는 라이트박스가 다양한 화면 크기에 맞게 조정되도록 하는 responsive_lightbox 옵션이 포함되어 있습니다.
scheduler.config.responsive_lightbox = true; //disabled by default
//set this to true to enable lightbox responsiveness
아래는 작은 화면에서 라이트박스가 조정되는 방식입니다:
Related sample: Responsive scheduler
라이트박스가 반응형일 때의 스타일을 직접 커스터마이즈할 수 있습니다.
이때 라이트박스에는 dhx_cal_light_responsive라는 추가 CSS 클래스가 적용되며, 이를 스타일에서 타겟팅할 수 있습니다.
기본적으로 이 클래스에는 1024px 미만의 작은 화면에서만 적용되는 미디어 쿼리가 포함되어 있어, 해당 디바이스에서 라이트박스의 외형을 조정할 수 있습니다.
모바일 및 반응형 지원과 관련된 설정 옵션은 아래와 같습니다:
터치 기능을 향상시키기 위해, 라이브러리에는 "Quick Info" 확장이 포함되어 있습니다.
이 확장은 표준 사이드바 버튼과 작은 편집 폼(터치 디바이스에서 누르기 어려운)을 더 크고 사용하기 쉬운 컨트롤로 대체합니다.
큰 버튼의 스케줄러를 활성화하려면 "Quick Info" 확장을 페이지에 추가하세요:
<script>
scheduler.plugins({
quick_info: true
});
scheduler.init('scheduler_here',new Date(2019,5,30),"day");
...
<script>
Related sample: Touch-oriented scheduler
활성화되면, 스케줄러는 표준 버튼을 더 큰 버튼으로 교체합니다:
quick-info 선택 사이드 메뉴와 표준 스케줄러의 선택 메뉴는 모두 icons_select에 정의된 동일한 구성을 사용합니다.
확장에서 제공하는 기능은 다음과 같습니다: