nodegui / react-nodegui

Build performant, native and cross-platform desktop applications with native React + powerful CSS like styling.🚀
https://react.nodegui.org
MIT License
6.18k stars 171 forks source link

Add `Calendar` using `QCalendarWidget` #372

Closed private-yusuke closed 2 years ago

private-yusuke commented 2 years ago

This PR adds Calendar, a component inheriting QCalendarWidget.

Example

import {
  DateFormat,
  DayOfWeek,
  NativeElement,
  QCalendarWidgetSignals,
  QDate,
} from "@nodegui/nodegui";
import {
  Calendar,
  Renderer,
  useEventHandler,
  Window,
} from "@nodegui/react-nodegui";
import React from "react";
const App = () => {
  const calendarClickHandler = useEventHandler<QCalendarWidgetSignals>(
    {
      activated: (nativeDate) => {
        const date = new QDate(nativeDate as unknown as NativeElement);
        console.log(`activated: ${date.toString(DateFormat.SystemLocaleDate)}`);
      },
      clicked: (nativeDate) => {
        const date = new QDate(nativeDate as unknown as NativeElement);
        console.log(`clicked: ${date.toString(DateFormat.SystemLocaleDate)}`);
      },
      currentPageChanged: (year, month) => {
        console.log(`currentPageChanged: year, month: ${year}, ${month}`);
      },
      selectionChanged: () => {
        console.log("selectionChanged");
      },
    },
    []
  );

  return (
    <Window>
      <Calendar firstDayOfWeek={DayOfWeek.Sunday} on={calendarClickHandler} />
    </Window>
  );
};
Renderer.render(<App />);