Block-like events

[pdpino]

I'm working on the feature block-like events. First working version:

"Event 5" is a regular event, while "Block" and "Other block" are block-like events, that span multiple days.

The way I see it, this will solve help solving:

• Events that span through multiple days, e.g. How to avoid the extra padding for the event at the right side #217 (comment)
• Timeslots, e.g. Is it possible to change the background color of specific time blocks? #92 (comment), Is there a way where we can avoid shrinking of the events occuring at the same time and ovelap it instead? #235
• Business hours, e.g. Add business hours #140

(Possible) API change:

const awesomeEvents = [{
    id: 1,
    color: 'lightblue',
    description: 'Block',

    // New field:
    eventType: 'block',

    // Dates indicate block corners:
    startDate: new Date(2022, 5, 17, 9, 30), // left-top corner
    endDate: new Date(2022, 5, 18, 13, 30), // right-bottom corner
}]

[hoangnm]

I understand the first use case, the event that can span multiple days. However, for the two remaining use cases, how this can help?

[pdpino]

For those I'm thinking of adding customization per event, such as:

• styling (container border, margins, etc) (e.g. Per event border color #228, How to avoid appointment right side space  #167 (comment))
• interactions, e.g. enable/disable dragging (How can i disable drag and drop on specific events ? #166), or others

const awesomeEvents = [
  {
    // e.g. business hours
    id: 1,
    eventType: 'block',
    startDate: Monday 8am,
    endDate: Friday 5pm,
    color: 'gray',
    borderColor: 'transparent',
    horizontalPadding: 0,
    disableDrag: true,
    disablePress: true,
    disableLongPress: true,
  },
  // ... regular events
]

(I updated the original description, we still need more stuff to solve those use cases 😅)

[pdpino]

@hoangnm update: the block-like events implementation is ready

(fully working in this branch: https://github.com/pdpino/react-native-week-view/tree/unstable/blocks)

I will split the changes into sequential PRs:

• Refactor: height responsiveness #229 (ongoing already)
• Make Event a PureComponent (Optimize event into a pure component #252)
• Support stacking events (Feature: enable stacking events #255)
• Support block-like events (Feature: blocks-like events #267)

[rdewolff]

How is this going to look like when u stack event on top of that grid event ?

[pdpino]

By default, block events are behind other events. In the future I'm thinking you could provide a z-index per event (or similar)

(I don't have a screenshot right now, could show later if needed)

[rdewolff]

That is amazing, I would love to have some kind of a layer functionality

[TheTushar2696]

Hi @pdpino
Eagerly waiting for this, any update on this.

Thanks in advance