[희락] FullCalendar Date

jaeyeon_lee·2024년 3월 20일

희락

목록 보기
2/8


FullCalendar에서 날짜를 입력하고 보여줄 때 하루 전날로 표시되고 다른데서 날짜를 불러와 보여줄때도 하루 전날로 보여짐 ..
getDateString함수를 추가해 해결함 (date형식을 string형식으로 변환해주는 함수)

getDateString()

export const getDateString = (date: Date) => {
  const yyyy = date.getFullYear();
  const mm = date.getMonth() + 1;
  const dd = date.getDate();
  return `${yyyy}-${String(mm).padStart(2, "0")}-${String(dd).padStart(
    2,
    "0"
  )}`;
};

date형식일때만 사용 가능해 data를 서버에서 불러오고 client쪽에서 new Date()를 사용해 date형식으로 바꿔줌

const fetchEvents = async () => {
      try {
        const events = await getAllEvents();
        // 날짜 객체로 변환
        events.forEach((event: WithId<ChurchEvent>) => {
          event.start_date = new Date(event.start_date);
          event.end_date = new Date(event.end_date);
        });
        console.log("converted date fetch events", events);
        setEvents(events);
      } catch (error) {
        console.log("error", error);
      }
    };
    fetchNotices();
    fetchEvents();
  }, []);
  

Post는 Date형식들이 undefined가 될수도 있도록 지정해놔서 ChurchEvent처럼 쓰면 undefined일수도 있다고 에러뜸! date가 있을때만 new date()가 되도록 설정해줌

  const fetchChurchPosts = async (pageNum = 1) => {
    try {
      if (bandName && postCategoryName) {
        const posts = await getPosts(bandName, postCategoryName);
        console.log("fetched posts", posts);
        posts.forEach((post: WithId<Post>) => {
          post.start_date = post.start_date ? new Date(post.start_date) : undefined;
          post.end_date = post.end_date ? new Date(post.end_date) : undefined;
          post.created_at = post.created_at ? new Date(post.created_at) : undefined;
          post.updated_at = post.updated_at ? new Date(post.updated_at) : undefined;
        });
        setPosts(posts);
        setTotalPages(Math.ceil(posts.length / 5));
        paginate(pageNum, posts);
      }
    } catch (error) {
      console.log("error", error);
    }
  };

사용할때

{post.created_at && getDateString(post.created_at)}
profile
🙋🏻‍♀️

0개의 댓글