search envelope-o feed check
Home Unanswered Active Tags New Question
user comment-o

Next.js Resource-Scheduling Calendar (Open-Source) i have a problem using it on mobile the controls are the problem

Asked by np
26 days ago.

this is the code .How can i make the controls phone frendly?

'use client';


import React, {useEffect, useState} from "react";

import {DayPilot, DayPilotCalendar, DayPilotNavigator} from "@daypilot/daypilot-lite-react";

import "./toolbar.css";


class ColumnData implements DayPilot.CalendarColumnData {

    id: string = "";

    name: string = "";

    blocked?: boolean;

}


export default function ResourceCalendar() {


    const [calendar, setCalendar] = useState<DayPilot.Calendar>();

    const [datePicker, setDatePicker] = useState<DayPilot.Navigator>();


    const [events, setEvents] = useState<DayPilot.EventData[]>([]);

    const [columns, setColumns] = useState<ColumnData[]>([]);

    const [startDate, setStartDate] = useState<string|DayPilot.Date>();


    const styles = {

        wrap: {

            display: "flex"

        },

        left: {

            marginRight: "10px"

        },

        main: {

            flexGrow: "1"

        }

    };


    const colors = [

        { name: "Dark Green", id: "#228B22" },

        { name: "Green", id: "#6aa84f" },

        { name: "Yellow", id: "#f1c232" },

        { name: "Orange", id: "#e69138" },

        { name: "Crimson", id: "#DC143C" },

        { name: "Light Coral", id: "#F08080" },

        { name: "Purple", id: "#9370DB" },

        { name: "Turquoise", id: "#40E0D0" },

        { name: "Light Blue", id: "#ADD8E6" },

        { name: "Sky Blue", id: "#87CEEB" },

        { name: "Blue", id: "#3d85c6" },

    ];



    const editEvent = async (e: DayPilot.Event) => {

        const form = [

            {name: "Event text", id: "text", type: "text"},

            {name: "Event color", id: "tags.color", type: "select", options: colors},

         

        ];


        const modal = await DayPilot.Modal.form(form, e.data);

        if (modal.canceled) { return; }


        const updatedEvent = modal.result;


        calendar?.events.update(updatedEvent);

    };


    const contextMenu = new DayPilot.Menu({

        items: [

            {

                text: "Delete",

                onClick: async args => {

                    calendar?.events.remove(args.source);

                },

            },

            {

                text: "-"

            },

            {

                text: "Edit...",

                onClick: async args => {

                    await editEvent(args.source);

                }

            }

        ]

    });


    const onBeforeHeaderRender = (args: DayPilot.CalendarBeforeHeaderRenderArgs) => {

        console.log('move2');

        args.header.areas = [

            {

                right: 5,

                top: "calc(50% - 10px)",

                width: 20,

                height: 20,

                action: "ContextMenu",

                symbol: "icons/daypilot.svg#threedots-v",

                style: "cursor: pointer",

                toolTip: "Show context menu",

                borderRadius: "50%",

                backColor: "#00000033",

                fontColor: "#ffffff",

                padding: 2,

                menu: new DayPilot.Menu({

                    onShow: async args => {

                        const column = columns.find(c => c.id === args.source.id);

                        const items = args.menu.items || [];

                        if (column?.blocked) {

                            items[0].text = "Unblock";

                        }

                        else {

                            items[0].text = "Block";

                        }

                    },

                    items: [

                        {

                            text: "Block",

                            onClick: async (args) => {

                                const updatedColumns = columns.map(c =>  c.id === args.source.id ? { ...c, blocked: !c.blocked } : c);

                                setColumns(updatedColumns);

                            }

                        },

                        {

                            text: "Edit",

                            onClick: async (args) => {

                                const column = columns.find(c => c.id === args.source.id);

                                if (!column) {

                                    return;

                                }

                                const modal = await DayPilot.Modal.prompt("Edit column name:", column.name);

                                if (modal.canceled) {

                                    return;

                                }

                                const updatedColumns = columns.map(c =>  c.id === args.source.id ? { ...c, name: modal.result } : c);

                                setColumns(updatedColumns);

                            }

                        },

                        {

                            text: "Delete",

                            onClick: async (args) => {

                                const updatedColumns = columns.filter(c => c.id !== args.source.id);

                                setColumns(updatedColumns);

                            }

                        }

                    ]

                })

            }

        ];

    };


    const onBeforeCellRender = (args: DayPilot.CalendarBeforeCellRenderArgs) => {

        const column = columns.find(c => c.id === args.cell.resource);

        if (column?.blocked) {

            args.cell.properties.backColor = "#f0f0f0";

        }

    };


    const onBeforeEventRender = (args: DayPilot.CalendarBeforeEventRenderArgs) => {

        const color = args.data.tags && args.data.tags.color || "#3d85c6";

        args.data.backColor = color + "cc";

        args.data.borderColor = "darker";


   

     

           

    };


    const onTodayClick = () => {

        datePicker?.select(DayPilot.Date.today());

    console.log(DayPilot.Date.today());

    const columns: ColumnData[] = [

        {name: ''+a.toString().substring(0,10), id: "R1"},

       

    ];

    setColumns(columns);

    };


    const onPreviousClick = () => {

        const previous = new DayPilot.Date(startDate).addDays(-1);

        datePicker?.select(previous);

        console.log(previous);

        a=previous;

        console.log(a);

        const columns: ColumnData[] = [

            {name: ''+a.toString().substring(0,10), id: "R1"},

           

        ];

        setColumns(columns);


    };


    const onNextClick = () => {

        const next = new DayPilot.Date(startDate).addDays(1);

        datePicker?.select(next);

       a=next;

       console.log(a);

           const columns: ColumnData[] = [

            {name: ''+a.toString().substring(0,10), id: "R1"},

           

        ];

        setColumns(columns);

    };

var a=DayPilot.Date.today();

    useEffect(() => {


        if (!calendar || calendar.disposed()) {

            return;

        }


        const columns: ColumnData[] = [

            {name: ''+a.toString().substring(0,10), id: "R1"},

           

        ];

        setColumns(columns);


        const events: DayPilot.EventData[] = [

     

        ];


        setEvents(events);


        datePicker?.select("2025-11-04");


    }, [calendar, datePicker]);


    const onTimeRangeSelected = async (args: DayPilot.CalendarTimeRangeSelectedArgs) => {

console.log("select");

        const column = columns.find(c => c.id === args.resource);

        if (column?.blocked) {

            calendar?.clearSelection();

            return;

        }


        const modal = await DayPilot.Modal.prompt("Create a new event:", "Event 1");

        calendar?.clearSelection();

        if (modal.canceled) {

            return;

        }

        calendar?.events.add({

            start: args.start,

            end: args.end,

            id: DayPilot.guid(),

            text: modal.result,

            resource: args.resource,

            tags: {}

        });

    };


    const onEventMove = async (args: DayPilot.CalendarEventMoveArgs) => {

        console.log("Move");

        const column = columns.find(c => c.id === args.newResource);

        if (column?.blocked) {

            args.preventDefault();

        }

    };


    return (/**/

        <div style={styles.wrap}>

     

            <div id='kalendar' >

                <DayPilotNavigator

                    selectMode={"None"}

                    showMonths={0}

                    skipMonths={0}

                    onTimeRangeSelected={args => setStartDate(args.start)}

                    controlRef={setDatePicker}

                    />

            </div>

           

            <div style={styles.main}>

                <div className={"toolbar"}>

                    <button onClick={onPreviousClick} className={"btn-light"}>Previous</button>

                    <button onClick={onTodayClick}>Today</button>

                    <button onClick={onNextClick} className={"btn-light"}>Next</button>

                </div>

                <DayPilotCalendar

                    viewType={"Resources"}

                    columns={columns}

                    startDate={startDate}

                    events={events}

                    eventBorderRadius={"5px"}

                    headerHeight={50}

                    durationBarVisible={false}

                    onTimeRangeSelected={onTimeRangeSelected}

                    onEventClick={async args => { await editEvent(args.e); }}

                    contextMenu={contextMenu}

                    onBeforeHeaderRender={onBeforeHeaderRender}

                    onBeforeEventRender={onBeforeEventRender}

                    onBeforeCellRender={onBeforeCellRender}

                    onEventMove={onEventMove}

                    controlRef={setCalendar}

                />

            </div>

        </div>

    )

}

Comment posted by Dan Letecky [DayPilot]
24 days ago.

Could you please describe in more detail exactly what doesn’t work as you expect?

Comment posted by np
24 days ago.

When I use it on pc I am able to select the time like from 9am to 8pm and release to give event an name but on mobile/phone I am not able to to select time and other controls that work on pc don’t work on mobile

Answer posted by Dan Letecky [DayPilot]
24 days ago.

The open-source version doesn’t support all functionality on touch devices at the moment. For example, you can click a time slot to select it but you can’t select multiple cells by dragging.

The full touch support will be added in the coming months.

Comment posted by Np
24 days ago.

Du you know how can i go araund this isue

New Reply
This reply is
Attachments:
or drop files here
Your name (optional):