Web app - slider showing days of the months feature

前端 未结 3 1443
臣服心动
臣服心动 2021-02-08 13:43

For a school project we have to build a web app. I\'ll be creating something where people can keep track of their classes, their homework, and their free time. A planner/calenda

3条回答
  •  醉话见心
    2021-02-08 13:59

    The key thing if you want your system to be dynamic is to make the data transmission short. So using Ajax, as icchanobot says, send the request for a specific month. Use get:

    'some_controller?m=' + month + '&y=' + year
    

    or even:

    'some_controller?next' // or previous
    

    The controller has to get data for the correct month, but not send back the whole month - only the data needed for your display, in a format as tight as possible. You could query how many events run on which days of that month:

    SELECT day, count(event) FROM event_table WHERE DATE BETWEEN 'yyyy-mm-01' AND 'yyyy-mm-31' GROUP BY day ORDER BY day;

    query needs adapting to your data structure - use a function to get the day from a complete date, and maybe use indexes so that the query returns the data fast.

    Then the controller returns a string as short as you can make it, of the relevant data sorted in day order:

    1=3,15=1,29=2

    That would mean "1st=3 events, 15th=1 event, 29=2 events". If you don't want the number of events then "1,15,2" is enough. Empty days aren't transmitted.

    the data is received by an ajax event handler on your web page and you parse it by using split, then populate the slider by using a loop.

    Your biggest drag, in a very dynamic application, is if it slows down when you repeatedly ask for the next month and the next. A few tricks:

    • Update the display while waiting for data; you send your query, and while it is being processed, you can slide the month into view, with the correct number of days, looking disabled so that the user knows immediately that they will get their data, and that it is in progress. Then when the data comes, populate and highlight. It will feel instant though it isn't.
    • Avoid processing information the user doesn't want anymore. If somebody clicks "next" three times, they want the data for july, not may, june and july. Don't process what you don't display.
    • Cache data you've already asked, unless you want the system to return dynamically to the server for the latest state of the calendar. You've asked for the data for May and June, but not displayed it; when the user hits "back", don't ask for that data again.

    Good luck!

提交回复
热议问题