Accessing QDate API and default page padding.

[DamianSz2000]

Hi I got 2 questions, first how do I acces QDate api? I tried to add run_method("setCalendarTo", [2020, 1])
But it doesn't do anything.

Second question how do I access default padding to remove it?

I figured out that these 3 divs structure is every time I type code. I did set column to cover whole page and now wanna set overflow to hidden

from nicegui import *

with ui.column().classes("h-screen w-screen grid grid-rows-2"):
    with ui.row().classes("h-full w-full"):
        ui.date("Date").classes("w-full h-full").props("first-day-of-week=1 color=teal-10")
    with ui.row().classes("grid grid-cols-2 h-full"):
        with ui.column().classes("h-full"):
            ui.button("Button 3")
            ui.button("Button 4")
        with ui.column().classes("h-full"):
            ui.button("Button 5")
            ui.button("Button 6")

ui.run()

I tried adding custom component using JS but how do I import Vue ? import { ref} from 'vue' doen't work.
Do I install Vue independently? Or is it somewhere included in nicegui.

Would appreciate tips, also is there official discord, or just github issues is place to ask questions?

[falkoschindler]

Date

• The initial year and month can be set using the default-year-month prop:

  d = ui.date().props('default-year-month=2020/01')

• To change the displayed month dynamically, call setCalendarTo as follows:

  ui.button('Click me!', on_click=lambda: d.run_method('setCalendarTo', 2020, 2))

Remove default padding

See #407 for different approaches to modify the HTML body, the page layout or the page content:

• Either add some global CSS:

  ui.add_head_html('<style>main.q-page > div { padding: 0 }</style>')

• Or use a page function to access the client and its content:

  @ui.page('/')
  def page(client: Client):
      client.content.classes('p-0')
      ui.label('Hello world!')

Discord

See #550 for an ongoing discussion about starting a Discord server.

[falkoschindler]

To set the initial year and month, use my first suggestion d = ui.date().props('default-year-month=2020/01'). There is no need to do it with an extra run_method call if you can simply set a prop. And run_method needs a client connection, which does not exist yet when creating the UI.

[DamianSz2000]

Thanks for answer sir. I am not asking for this certain purpose tho! I am looking into future to be able to use every available component to it's max capabilities. I know that I can set date initially but I wanna learn specifically how to handle Vue methods on all components.
Talking about client connection, I saw example in API Reference but I don't know how to apply it in code that I sent. If client connection doesn't exist when gui is being created, is waiting for client connection only available through making seperate "waiting" page?

[DamianSz2000]

Oh I managed to make it work!
Would you tell if it's ugly way to do that or is perfectly fine. Thanks :)

import datetime
import asyncio
from nicegui import Client, ui

@ui.page('/main')
async def main_page(client: Client):
    with ui.column().classes("w-screen h-screen grid grid-rows-2 bg-[#9A5F86]"):
        with ui.row().classes("w-full h-full"):
            calendar = ui.date(value = datetime.date.today(), on_change=lambda e: result.set_text(e.value)).on('load', lambda e: print(e.value))
            calendar.classes("w-full h-full dupa")
            calendar.props('first-day-of-week="1"')
            await client.connected()
            calendar.run_method('setCalendarTo', 2020, 2)
            result = ui.label()
        with ui.row().classes("w-full h-full grid grid-cols-2"):
            with ui.column().classes("w-full h-full"):
                with ui.card().classes("w-full h-full").classes("bg-[#FFFCFE]"):
                    ui.label("tekst 1")
            with ui.column().classes("w-full h-full"):
                with ui.card().classes("w-full h-full").classes("bg-[#FFFCFE]"):
                    ui.label("tekst 2")
main_page
ui.run()

[falkoschindler]

Yes, that's the correct way to wait for a client connection. 👍

Just a minor remark: main_page at the bottom is not called, thus does not do anything. You can simply remove it. Decorating the function with @ui.page is all you need to register the page and make it accessible via /main.

[DamianSz2000]

Oh useful information! Works perfect. Thanks for all answers, appreciate it