티스토리 뷰
pc화면은 넉넉해서 괜찮은데 모바일 화면에서는 너무 작아서 보기가 힘들다.
어짜피 근무신청은 하루에 1개 밖에 데이타가 없어야하니까.
FullCalendar에서 모바일 화면에서 이벤트를 1개만 보이게 하는 방법은 FullCalendar의 ‘eventLimit’ 옵션을 사용하여 설정할 수 있습니다. 이 옵션은 일정 뷰에서 보여질 수 있는 최대 이벤트 수를 설정합니다. 이를 통해 ‘+more’ 링크를 클릭하여 추가 이벤트를 볼 수 있습니다.
다음은 ‘eventLimit’ 옵션을 사용하는 방법입니다:
$('#calendar').fullCalendar({
eventLimit: 1, // 이벤트를 1개만 보이게 설정
views: {
month: { // 월별 뷰에서는 이벤트 제한을 적용
eventLimit: 1
}
}
});
그러나 이 방법은 모든 화면 크기에 적용됩니다. 모바일 화면에서만 이 설정을 적용하려면, 화면 크기에 따라 다른 뷰를 로드하는 방법을 사용해야 합니다. 예를 들어, 모바일 화면에서는 ‘basicDay’ 뷰를, 데스크톱에서는 ‘basicWeek’ 뷰를 로드할 수 있습니다.
이를 위해 ‘windowResize’ 이벤트를 사용하여 화면 크기에 따라 캘린더 뷰를 변경할 수 있습니다. 다음은 이를 구현하는 예제 코드입니다:
$('#calendar').fullCalendar({
defaultView: 'basicWeek',
windowResize: function(view) {
if ($(window).width() < 765){
$('#calendar').fullCalendar('changeView', 'basicDay');
} else {
$('#calendar').fullCalendar('changeView', 'basicWeek');
}
}
});
이 코드는 화면 크기가 765px 미만일 때 ‘basicDay’ 뷰를, 그렇지 않을 때 ‘basicWeek’ 뷰를 로드합니다.
이러한 방법을 사용하면, 모바일 화면에서는 하루에 대한 이벤트만 보여주고, 데스크톱 화면에서는 주간 뷰를 유지할 수 있습니다. 이렇게 하면 모바일 화면에서 ‘+more’ 대신 하루에 대한 이벤트 1개만 보여줄 수 있습니다. 이 방법이 도움이 되길 바랍니다!
라고 하는데 ..그래도 너무 작아서
강제 가로화면으로 바꾸려고한다.
웹 페이지를 모바일에서 강제로 가로 화면으로 보이게 하는 방법은 CSS와 JavaScript를 사용하여 화면 방향을 제어하는 것입니다. 다음은 이를 구현하는 예제 코드입니다:
<html>
<head>
<style>
#container {
display: block;
}
@media only screen and (orientation:portrait) {
#container {
height: 100vw;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@media only screen and (orientation:landscape) {
#container {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}
</style>
</head>
<body id="container">
<!-- 페이지 내용 -->
</body>
</html>
이 코드는 화면 방향이 세로(portrait)일 때, 페이지의 내용을 90도 회전시켜 가로 화면으로 보이게 합니다. 그러나 이 방법은 사용자가 화면을 회전시키면 페이지 레이아웃이 깨질 수 있습니다.
또 다른 방법으로는 PleaseRotate.js와 같은 라이브러리를 사용하여 사용자에게 화면을 가로로 회전시키도록 요청하는 것입니다. 이 라이브러리는 사용자가 웹사이트를 특정 방향으로 보도록 요청하는 메시지와 애니메이션을 제공합니다2.
이러한 방법들을 사용하면, 모바일 화면에서 웹 페이지를 강제로 가로 화면으로 보이게 할 수 있습니다. 이 방법이 도움이 되길 바랍니다! 😊
위 방법도 써보고 js도 써보았지만.
결국은 fullcalendar에서 높이 설정으로 선택함
'웹' 카테고리의 다른 글
| 당근 멀티 프로그램 쓰시는 분들...-_- 종소세 관련해서 (0) | 2024.05.15 |
|---|---|
| 트위터 청소기 캡쳐/삭제 댕댕이 프로그램 동영상도 다운 (1) | 2024.05.14 |
| moviepy 에서 에러생길때 Errno 32 FFMPEG (0) | 2023.11.05 |
| 애니데스크 한글 입력 오류 스페이스를 쳐야 보임 (0) | 2023.10.02 |
| 클라우드 플레어와 구글 애드센스 사이의 ip 확인 (0) | 2023.09.22 |
- Total
- Today
- Yesterday
- 유튜브
- 그누보드5
- 에러
- php
- Fullcalendar
- SSL
- 클라우드플레어
- 아미나
- 제로보드
- 파이선
- Cloudflare
- Magisk
- 회원가입
- 그누보드
- xe
- lsposed
- 워드프레스
- php8
- 아파치
- 멀티계정
- 텔레그램
- 루팅
- Apache
- 파이썬
- 텔레그램봇
- python
- 윈도우
- 셀레니움
- .htaccess
- 오토셋
| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 |