<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: karolk</title>
    <description>The latest articles on Forem by karolk (@kozerkarol).</description>
    <link>https://forem.com/kozerkarol</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F811734%2F979163e7-1668-4692-abfa-7f3c521bf3ee.png</url>
      <title>Forem: karolk</title>
      <link>https://forem.com/kozerkarol</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/kozerkarol"/>
    <language>en</language>
    <item>
      <title>How I Started Contributing to Open Mercato (My Practical Approach)</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Tue, 03 Mar 2026 14:33:42 +0000</pubDate>
      <link>https://forem.com/kozerkarol/how-i-started-contributing-to-open-mercato-my-practical-approach-4meb</link>
      <guid>https://forem.com/kozerkarol/how-i-started-contributing-to-open-mercato-my-practical-approach-4meb</guid>
      <description>&lt;h1&gt;
  
  
  How I Started Contributing to Open Mercato
&lt;/h1&gt;

&lt;p&gt;Open source can feel intimidating when you're starting out.&lt;/p&gt;

&lt;p&gt;You see large repositories, experienced contributors, long issue discussions, and public pull requests where anyone can review your code. For a while I kept thinking I should “learn more first” before trying to contribute.&lt;/p&gt;

&lt;p&gt;Eventually I decided to just try.&lt;/p&gt;

&lt;p&gt;I chose &lt;strong&gt;Open Mercato&lt;/strong&gt; and approached it in a simple way — explore the project, understand how it works, and start with something small.&lt;/p&gt;

&lt;p&gt;This is roughly how that process looked.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why I Chose Open Mercato
&lt;/h2&gt;

&lt;p&gt;I didn’t pick a repository randomly.&lt;/p&gt;

&lt;p&gt;While browsing GitHub projects, &lt;strong&gt;Open Mercato&lt;/strong&gt; stood out for a few reasons:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;The repository was active — there were recent commits and pull requests.&lt;/li&gt;
&lt;li&gt;Maintainers were responding to issues.&lt;/li&gt;
&lt;li&gt;The documentation was detailed enough to understand what the project does.&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That last point helped a lot. When documentation is decent, it removes a lot of the friction that usually stops people from getting started.&lt;/p&gt;




&lt;h2&gt;
  
  
  Spending Time Reading the Repository
&lt;/h2&gt;

&lt;p&gt;Before writing any code, I spent some time just exploring the project.&lt;/p&gt;

&lt;p&gt;I read through the &lt;code&gt;README.md&lt;/code&gt; and the &lt;code&gt;CONTRIBUTING.md&lt;/code&gt;, and then started looking around the repository structure. I opened a few different folders and files just to see how things were organized.&lt;/p&gt;

&lt;p&gt;I also checked:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;open issues&lt;/li&gt;
&lt;li&gt;recently merged pull requests&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Looking at merged PRs was particularly useful. It gave me a better idea of what maintainers expect from contributors and how changes are usually structured.&lt;/p&gt;

&lt;p&gt;Instead of trying to guess how things worked, I tried to observe how the project was already evolving.&lt;/p&gt;




&lt;h2&gt;
  
  
  Looking for a Small First Contribution
&lt;/h2&gt;

&lt;p&gt;At first I thought about trying something more ambitious, but I quickly realized that probably wasn’t the best way to start.&lt;/p&gt;

&lt;p&gt;So I deliberately looked for something small.&lt;/p&gt;

&lt;p&gt;Things like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;minor bugs&lt;/li&gt;
&lt;li&gt;small improvements&lt;/li&gt;
&lt;li&gt;documentation updates&lt;/li&gt;
&lt;li&gt;small refactoring opportunities&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;The goal wasn't to make a big change. I mainly wanted to understand the workflow and see how contributions are reviewed.&lt;/p&gt;

&lt;p&gt;Starting small made the whole process feel much less intimidating.&lt;/p&gt;




&lt;h2&gt;
  
  
  Opening the Pull Request
&lt;/h2&gt;

&lt;p&gt;Once I found something I could improve, I followed the usual GitHub process:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;fork the repository
&lt;/li&gt;
&lt;li&gt;create a separate branch
&lt;/li&gt;
&lt;li&gt;implement a small change
&lt;/li&gt;
&lt;li&gt;write a clear commit message
&lt;/li&gt;
&lt;li&gt;open a pull request&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When creating the PR, I tried to explain clearly:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;what the change does&lt;/li&gt;
&lt;li&gt;why it improves the project&lt;/li&gt;
&lt;li&gt;whether it might affect anything else&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Maintainers review a lot of contributions, so clear explanations make that process easier.&lt;/p&gt;




&lt;h2&gt;
  
  
  Feedback From Maintainers
&lt;/h2&gt;

&lt;p&gt;After opening the pull request, I received some feedback.&lt;/p&gt;

&lt;p&gt;It wasn’t really criticism — it was mostly suggestions to make the change align better with the existing code style and structure.&lt;/p&gt;

&lt;p&gt;This part was actually very helpful. Seeing how maintainers think about code quality and consistency gave me a better understanding of how the project is maintained.&lt;/p&gt;

&lt;p&gt;I updated the PR based on the comments and continued the discussion there.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I Learned From the Process
&lt;/h2&gt;

&lt;p&gt;One thing that stood out to me is that contributing to open source involves a lot more than just writing code.&lt;/p&gt;

&lt;p&gt;You spend a lot of time:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;reading other people's code&lt;/li&gt;
&lt;li&gt;understanding design decisions&lt;/li&gt;
&lt;li&gt;communicating clearly in pull requests and discussions&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Another thing I realized is that you don't need to be an expert to start contributing. Even small improvements can be valuable, especially in active projects.&lt;/p&gt;




&lt;h2&gt;
  
  
  If You're Thinking About Contributing
&lt;/h2&gt;

&lt;p&gt;If you're considering contributing to open source but aren't sure where to begin, a few things helped me:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;choose a project that actually interests you&lt;/li&gt;
&lt;li&gt;spend time reading the repository before coding&lt;/li&gt;
&lt;li&gt;start with small, manageable changes&lt;/li&gt;
&lt;li&gt;don't worry too much about making everything perfect&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once you go through the contribution process once, it becomes much easier the next time.&lt;/p&gt;




&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;My first contribution to &lt;strong&gt;Open Mercato&lt;/strong&gt; was relatively small, but the experience was valuable.&lt;/p&gt;

&lt;p&gt;It helped me understand how open source collaboration works in practice — from exploring a repository to discussing changes in a pull request.&lt;/p&gt;

&lt;p&gt;If you're thinking about contributing to a project, it's worth trying. The first step is usually the hardest part.&lt;/p&gt;

</description>
      <category>beginners</category>
      <category>documentation</category>
      <category>opensource</category>
      <category>tutorial</category>
    </item>
    <item>
      <title>From Static Timeline to Fully Interactive Scheduler: Drag &amp; Drop in My React Native Library</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Sun, 01 Mar 2026 20:45:01 +0000</pubDate>
      <link>https://forem.com/kozerkarol/from-static-timeline-to-fully-interactive-scheduler-drag-drop-in-my-react-native-library-4jkl</link>
      <guid>https://forem.com/kozerkarol/from-static-timeline-to-fully-interactive-scheduler-drag-drop-in-my-react-native-library-4jkl</guid>
      <description>&lt;h2&gt;
  
  
  I Built a React Native Scheduling Timeline Library — and Now It Supports Drag &amp;amp; Drop, Resize &amp;amp; Smart Overlaps
&lt;/h2&gt;

&lt;p&gt;A while ago, I shared that I built a &lt;strong&gt;time-based scheduling timeline library for React Native&lt;/strong&gt;. It was designed to handle complex layouts like planners, booking systems, and EPG-style interfaces.&lt;/p&gt;

&lt;p&gt;Today, I’m excited to share a major update:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;The library now supports &lt;strong&gt;Drag &amp;amp; Drop, Resize interactions, and intelligent overlap stacking&lt;/strong&gt;.&lt;/p&gt;
&lt;/blockquote&gt;

&lt;p&gt;This transforms it from a static timeline component into a fully interactive, production-ready scheduling tool.&lt;/p&gt;

&lt;p&gt;

  &lt;iframe src="https://www.youtube.com/embed/YxJAslU_0eY"&gt;
  &lt;/iframe&gt;


&lt;/p&gt;




&lt;h2&gt;
  
  
  Why I Built It
&lt;/h2&gt;

&lt;p&gt;If you’ve ever tried building a scheduling UI in React Native, you probably know how tricky it gets.&lt;/p&gt;

&lt;p&gt;Some of the challenges include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Precisely positioning events based on time&lt;/li&gt;
&lt;li&gt;Handling horizontal and vertical scrolling simultaneously&lt;/li&gt;
&lt;li&gt;Virtualizing large datasets for performance&lt;/li&gt;
&lt;li&gt;Synchronizing headers and content&lt;/li&gt;
&lt;li&gt;Supporting TV platforms and remote navigation&lt;/li&gt;
&lt;li&gt;Keeping performance smooth on tablets and lower-end devices&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;There wasn’t a flexible, production-ready solution that covered these needs — so I decided to build one.&lt;/p&gt;




&lt;h2&gt;
  
  
  What the Library Does
&lt;/h2&gt;

&lt;p&gt;The timeline component allows you to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Render events across a horizontal time axis&lt;/li&gt;
&lt;li&gt;Group events by rows (resources, users, rooms, etc.)&lt;/li&gt;
&lt;li&gt;Scroll horizontally through time&lt;/li&gt;
&lt;li&gt;Scroll vertically across resources&lt;/li&gt;
&lt;li&gt;Handle large datasets efficiently&lt;/li&gt;
&lt;li&gt;Customize rendering and styling&lt;/li&gt;
&lt;li&gt;Automatically detect and stack overlapping events&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It works across &lt;strong&gt;iOS, Android, and TV platforms&lt;/strong&gt;, and is built purely in React Native.&lt;/p&gt;




&lt;h2&gt;
  
  
  Drag, Drop &amp;amp; Resize
&lt;/h2&gt;

&lt;p&gt;The timeline now supports full gesture-based editing.&lt;/p&gt;

&lt;p&gt;You can:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;🟢 Drag events horizontally to change their time&lt;/li&gt;
&lt;li&gt;🟢 Drag events vertically to move them between rows&lt;/li&gt;
&lt;li&gt;🟢 Resize from the left edge to update the start time&lt;/li&gt;
&lt;li&gt;🟢 Resize from the right edge to update the end time&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Resize handlers are fully implemented and designed to feel natural and responsive, even during fast interactions.&lt;/p&gt;

&lt;p&gt;Everything is calculated in real time — no hacks, no WebViews.&lt;/p&gt;




&lt;h2&gt;
  
  
  Smart Overlap Detection &amp;amp; Stacking
&lt;/h2&gt;

&lt;p&gt;Scheduling systems must handle overlapping events gracefully.&lt;/p&gt;

&lt;p&gt;The library now includes:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Automatic overlap detection&lt;/li&gt;
&lt;li&gt;Intelligent stacking logic&lt;/li&gt;
&lt;li&gt;Dynamic recalculation during drag &amp;amp; resize&lt;/li&gt;
&lt;li&gt;Clean visual separation of colliding events&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;When events overlap in time, they are stacked vertically within the same row — similar to professional calendar systems.&lt;/p&gt;

&lt;p&gt;This ensures:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Clear visual hierarchy&lt;/li&gt;
&lt;li&gt;No hidden events&lt;/li&gt;
&lt;li&gt;Accurate collision handling&lt;/li&gt;
&lt;li&gt;Smooth recalculation while dragging or resizing&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Handling this dynamically while maintaining performance was one of the most challenging parts of the implementation.&lt;/p&gt;




&lt;h2&gt;
  
  
  Under the Hood
&lt;/h2&gt;

&lt;p&gt;Adding DnD, resize handlers, and overlap detection was not trivial.&lt;/p&gt;

&lt;p&gt;Some of the technical challenges solved:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Handling simultaneous vertical + horizontal gestures&lt;/li&gt;
&lt;li&gt;Real-time time recalculation during drag&lt;/li&gt;
&lt;li&gt;Snap-to-time logic&lt;/li&gt;
&lt;li&gt;Dynamic width adjustments while resizing&lt;/li&gt;
&lt;li&gt;Collision detection during movement&lt;/li&gt;
&lt;li&gt;Overlap stacking recalculation&lt;/li&gt;
&lt;li&gt;Preventing layout thrashing&lt;/li&gt;
&lt;li&gt;Maintaining high FPS during re-renders&lt;/li&gt;
&lt;li&gt;Avoiding unnecessary computations&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Performance was a top priority from day one.&lt;/p&gt;




&lt;h2&gt;
  
  
  Real-World Use Cases
&lt;/h2&gt;

&lt;p&gt;With drag-and-drop, resize, and overlap stacking support, the library is ready for serious scheduling scenarios:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📅 Booking systems&lt;/li&gt;
&lt;li&gt;🏥 Medical scheduling&lt;/li&gt;
&lt;li&gt;👥 Shift planning&lt;/li&gt;
&lt;li&gt;📺 TV program guides (EPG)&lt;/li&gt;
&lt;li&gt;🏢 Resource management tools&lt;/li&gt;
&lt;li&gt;🛠 Production planning systems&lt;/li&gt;
&lt;li&gt;🏫 Classroom or training schedules&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s no longer just a timeline — it’s a fully interactive scheduler engine.&lt;/p&gt;




&lt;h2&gt;
  
  
  Current Status
&lt;/h2&gt;

&lt;p&gt;The library is currently in &lt;strong&gt;beta&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;I’m actively improving:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;API ergonomics&lt;/li&gt;
&lt;li&gt;Performance optimizations&lt;/li&gt;
&lt;li&gt;Edge-case handling&lt;/li&gt;
&lt;li&gt;Documentation&lt;/li&gt;
&lt;li&gt;TypeScript support&lt;/li&gt;
&lt;li&gt;Advanced stacking configuration options&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Feedback from real-world usage is extremely valuable at this stage.&lt;/p&gt;




&lt;h2&gt;
  
  
  What’s Next?
&lt;/h2&gt;

&lt;p&gt;Planned improvements include:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;More advanced collision rules&lt;/li&gt;
&lt;li&gt;Enhanced performance profiling tools&lt;/li&gt;
&lt;li&gt;Additional customization hooks&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Building a robust scheduling timeline in React Native is much harder than it looks.&lt;/p&gt;

&lt;p&gt;Adding smooth drag-and-drop, resize handlers, and real-time overlap stacking — while keeping performance high across devices — was a serious engineering challenge.&lt;/p&gt;

&lt;p&gt;But now, the component feels complete.&lt;/p&gt;

&lt;p&gt;If you’re building anything time-based in React Native, I’d love to hear your thoughts or feedback.&lt;/p&gt;

&lt;p&gt;The journey continues &lt;/p&gt;

</description>
      <category>mobile</category>
      <category>reactnative</category>
      <category>javascript</category>
      <category>react</category>
    </item>
    <item>
      <title>I Built a React Native Scheduling Timeline Library — Here’s Why</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Sat, 07 Feb 2026 13:11:28 +0000</pubDate>
      <link>https://forem.com/kozerkarol/i-built-a-react-native-scheduling-timeline-library-heres-why-4amf</link>
      <guid>https://forem.com/kozerkarol/i-built-a-react-native-scheduling-timeline-library-heres-why-4amf</guid>
      <description>&lt;h2&gt;
  
  
  I Built a React Native Scheduling Timeline Library — Here’s Why
&lt;/h2&gt;

&lt;p&gt;Scheduling UIs look simple… until you try to build one.&lt;/p&gt;

&lt;p&gt;After working on multiple products that required &lt;strong&gt;time-based layouts&lt;/strong&gt; — planners, calendars, EPG-style TV guides, and complex schedulers — I realized how quickly things become complicated:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;precise time positioning
&lt;/li&gt;
&lt;li&gt;virtualization and performance
&lt;/li&gt;
&lt;li&gt;scrolling synchronization
&lt;/li&gt;
&lt;li&gt;focus handling on TV devices
&lt;/li&gt;
&lt;li&gt;responsive layouts for mobile and tablet
&lt;/li&gt;
&lt;li&gt;drag &amp;amp; drop interactions
&lt;/li&gt;
&lt;li&gt;real-world edge cases everywhere
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I described many of these challenges in detail in this article:&lt;/p&gt;

&lt;p&gt;👉 &lt;a href="https://dev.to/kozerkarol/building-scheduling-timeline-uis-in-react-native-why-it-gets-hard-so-fast-38g2"&gt;https://dev.to/kozerkarol/building-scheduling-timeline-uis-in-react-native-why-it-gets-hard-so-fast-38g2&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;While solving those problems, I ended up building something bigger.&lt;/p&gt;




&lt;h2&gt;
  
  
  Introducing a React Native Scheduling / Timeline Component
&lt;/h2&gt;

&lt;p&gt;Hey everyone 👋&lt;/p&gt;

&lt;p&gt;I wanted to share something I’ve been working on for quite a while.&lt;/p&gt;

&lt;p&gt;I built a &lt;strong&gt;React Native time-based scheduling / timeline component&lt;/strong&gt; designed for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;schedulers
&lt;/li&gt;
&lt;li&gt;planners
&lt;/li&gt;
&lt;li&gt;calendars
&lt;/li&gt;
&lt;li&gt;EPG-style timelines
&lt;/li&gt;
&lt;li&gt;any UI that represents data across time
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And it’s built for &lt;strong&gt;real production use cases&lt;/strong&gt;, not just demos.&lt;/p&gt;

&lt;p&gt;

  &lt;iframe src="https://www.youtube.com/embed/E1QstKI8to4"&gt;
  &lt;/iframe&gt;


&lt;/p&gt;




&lt;h2&gt;
  
  
  Designed for Real Devices
&lt;/h2&gt;

&lt;p&gt;The component works across multiple environments:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;iPad &amp;amp; iPhone
&lt;/li&gt;
&lt;li&gt;Android devices
&lt;/li&gt;
&lt;li&gt;TV platforms (Android TV and similar)
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It supports &lt;strong&gt;time-based layouts&lt;/strong&gt; such as schedules, timelines, and TV guides — where precision, performance, and usability really matter.&lt;/p&gt;

&lt;p&gt;Below are short demo videos showing the component running on real hardware:&lt;/p&gt;

&lt;h3&gt;
  
  
  iPad demo
&lt;/h3&gt;

&lt;p&gt;

  &lt;iframe src="https://www.youtube.com/embed/E1QstKI8to4"&gt;
  &lt;/iframe&gt;


&lt;/p&gt;

&lt;h3&gt;
  
  
  iPhone demo
&lt;/h3&gt;

&lt;p&gt;

  &lt;iframe src="https://www.youtube.com/embed/vtc8lw7XYjE"&gt;
  &lt;/iframe&gt;


&lt;/p&gt;

&lt;h3&gt;
  
  
  Android TV demo
&lt;/h3&gt;

&lt;p&gt;

  &lt;iframe src="https://www.youtube.com/embed/gIJGBNk_AuE"&gt;
  &lt;/iframe&gt;


&lt;/p&gt;




&lt;h2&gt;
  
  
  Current Beta Status
&lt;/h2&gt;

&lt;p&gt;The library is currently in &lt;strong&gt;beta&lt;/strong&gt;, and there are a few important notes:&lt;/p&gt;

&lt;h3&gt;
  
  
  TV navigation
&lt;/h3&gt;

&lt;p&gt;If you plan to use it in a &lt;strong&gt;TV environment&lt;/strong&gt;, you’ll need to implement &lt;strong&gt;custom imperative navigation&lt;/strong&gt; for now.&lt;/p&gt;

&lt;p&gt;Native TV navigation is already planned for upcoming releases.&lt;/p&gt;

&lt;h3&gt;
  
  
  Drag &amp;amp; Drop
&lt;/h3&gt;

&lt;p&gt;Drag &amp;amp; Drop is &lt;strong&gt;not available yet&lt;/strong&gt; in the current beta.&lt;/p&gt;

&lt;p&gt;It’s already on the roadmap and will be introduced in a future version.&lt;/p&gt;




&lt;h2&gt;
  
  
  Looking for Early Testers
&lt;/h2&gt;

&lt;p&gt;I’m currently looking for developers who would like to:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;test it in real projects
&lt;/li&gt;
&lt;li&gt;give feedback
&lt;/li&gt;
&lt;li&gt;suggest improvements
&lt;/li&gt;
&lt;li&gt;or just try to break it 😄
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you’re interested, feel free to reach out:&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Subject:&lt;/strong&gt; Planby Native&lt;br&gt;&lt;br&gt;
&lt;strong&gt;Email:&lt;/strong&gt; &lt;a href="mailto:contact@planby.app"&gt;contact@planby.app&lt;/a&gt;  &lt;/p&gt;

&lt;p&gt;Project website: &lt;a href="https://planby.app/" rel="noopener noreferrer"&gt;https://planby.app/&lt;/a&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  I’d Love Your Feedback
&lt;/h2&gt;

&lt;p&gt;I’d especially love to hear:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;what &lt;strong&gt;use cases&lt;/strong&gt; you would try this for
&lt;/li&gt;
&lt;li&gt;what you &lt;strong&gt;expect from a scheduler / timeline component&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;any &lt;strong&gt;developer-experience feedback&lt;/strong&gt;
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Your input will directly shape the next releases.&lt;/p&gt;




&lt;h2&gt;
  
  
  Final Thoughts
&lt;/h2&gt;

&lt;p&gt;Building &lt;strong&gt;time-based scheduling UIs&lt;/strong&gt; in React Native is far more complex than it first appears.&lt;/p&gt;

&lt;p&gt;This library is my attempt to make that problem:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;easier to solve
&lt;/li&gt;
&lt;li&gt;production-ready
&lt;/li&gt;
&lt;li&gt;performant across mobile and TV
&lt;/li&gt;
&lt;li&gt;flexible enough for real-world apps
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;If you’re working on anything involving &lt;strong&gt;time, schedules, or timelines&lt;/strong&gt;, I’d love for you to try it and share your thoughts.&lt;/p&gt;

&lt;p&gt;Thanks for checking it out 🙌&lt;/p&gt;

</description>
      <category>mobile</category>
      <category>reactnative</category>
      <category>showdev</category>
      <category>ui</category>
    </item>
    <item>
      <title>jQuery 4.0 in 2026 — A Small Release, A Big Throwback</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Fri, 30 Jan 2026 10:32:59 +0000</pubDate>
      <link>https://forem.com/kozerkarol/jquery-40-in-2026-a-small-release-a-big-throwback-59m6</link>
      <guid>https://forem.com/kozerkarol/jquery-40-in-2026-a-small-release-a-big-throwback-59m6</guid>
      <description>&lt;p&gt;The release of jQuery 4.0 in 2026 feels like more than just a version bump — it feels like a time capsule.&lt;/p&gt;

&lt;p&gt;For many developers (myself included), jQuery was one of the first tools that made front-end development truly approachable. There was a time when cross-browser issues were everywhere, DOM APIs were inconsistent, and doing simple things in vanilla JavaScript felt unnecessarily complex.&lt;/p&gt;

&lt;p&gt;Then jQuery came along with its famous promise: &lt;em&gt;“Write less, do more.”&lt;/em&gt;&lt;br&gt;&lt;br&gt;
And it delivered.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why jQuery Mattered
&lt;/h2&gt;

&lt;p&gt;jQuery wasn’t just a library — it shaped how we thought about frontend development:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Clean DOM selection
&lt;/li&gt;
&lt;li&gt;Simple event handling
&lt;/li&gt;
&lt;li&gt;AJAX made accessible
&lt;/li&gt;
&lt;li&gt;A massive plugin ecosystem
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;For a whole generation of developers, jQuery was the gateway into JavaScript.&lt;/p&gt;

&lt;h2&gt;
  
  
  jQuery in a Modern World
&lt;/h2&gt;

&lt;p&gt;Today, we have powerful frameworks, standardized browser APIs, and modern JavaScript features that solve many of the problems jQuery originally addressed.&lt;/p&gt;

&lt;p&gt;Most new projects don’t need jQuery anymore — and that’s okay. In a way, its success helped push the web forward to where we are now.&lt;/p&gt;

&lt;p&gt;jQuery 4.0 focuses on modernization: removing legacy pieces, aligning with modern standards, and staying lean. It’s not trying to compete with frameworks; it’s evolving to remain relevant where it still makes sense.&lt;/p&gt;

&lt;h2&gt;
  
  
  A Respectful Nod to the Past
&lt;/h2&gt;

&lt;p&gt;Seeing jQuery reach version 4 in 2026 is a reminder of how fast the ecosystem moves — and how some tools leave a lasting impact.&lt;/p&gt;

&lt;p&gt;Even if you don’t use it anymore, chances are jQuery played a role in your journey.&lt;/p&gt;

&lt;p&gt;And honestly? That deserves some respect.&lt;/p&gt;

</description>
      <category>frontend</category>
      <category>javascript</category>
      <category>news</category>
      <category>webdev</category>
    </item>
    <item>
      <title>Building Scheduling &amp; Timeline UIs in React Native: Why It Gets Hard So Fast</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Tue, 27 Jan 2026 13:07:28 +0000</pubDate>
      <link>https://forem.com/kozerkarol/building-scheduling-timeline-uis-in-react-native-why-it-gets-hard-so-fast-38g2</link>
      <guid>https://forem.com/kozerkarol/building-scheduling-timeline-uis-in-react-native-why-it-gets-hard-so-fast-38g2</guid>
      <description>&lt;p&gt;At first glance, building a scheduling or timeline-based UI sounds straightforward.&lt;/p&gt;

&lt;p&gt;You have:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a time axis
&lt;/li&gt;
&lt;li&gt;some events
&lt;/li&gt;
&lt;li&gt;maybe a grid
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;How hard can it be?&lt;/p&gt;

&lt;p&gt;If you’ve ever actually built one in &lt;strong&gt;React Native&lt;/strong&gt;, you probably know the answer already:&lt;br&gt;&lt;br&gt;
&lt;strong&gt;it gets complicated very quickly.&lt;/strong&gt;&lt;/p&gt;




&lt;h2&gt;
  
  
  When scheduling stops being “just a calendar”
&lt;/h2&gt;

&lt;p&gt;Most scheduling UIs start simple:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;a daily planner
&lt;/li&gt;
&lt;li&gt;a basic calendar
&lt;/li&gt;
&lt;li&gt;a list of time-based items
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But real-world requirements show up fast:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;hundreds of items on screen
&lt;/li&gt;
&lt;li&gt;thousands of time-based events
&lt;/li&gt;
&lt;li&gt;overlapping ranges
&lt;/li&gt;
&lt;li&gt;multi-day views
&lt;/li&gt;
&lt;li&gt;smooth scrolling on mobile
&lt;/li&gt;
&lt;li&gt;gestures (drag, resize, long press)
&lt;/li&gt;
&lt;li&gt;TV or tablet support
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;At that point, you’re no longer building a “calendar”.&lt;br&gt;&lt;br&gt;
You’re building a &lt;strong&gt;time-based rendering engine&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  The biggest pain points (from real projects)
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. Performance with large datasets
&lt;/h3&gt;

&lt;p&gt;Rendering a few events is easy.&lt;br&gt;&lt;br&gt;
Rendering &lt;strong&gt;hundreds of rows and thousands of events&lt;/strong&gt; — not so much.&lt;/p&gt;

&lt;p&gt;You start fighting:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;dropped frames
&lt;/li&gt;
&lt;li&gt;memory usage
&lt;/li&gt;
&lt;li&gt;layout thrashing
&lt;/li&gt;
&lt;li&gt;scroll jank
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Even with virtualization, timelines are harder than lists because:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;positions depend on time calculations
&lt;/li&gt;
&lt;li&gt;items overlap
&lt;/li&gt;
&lt;li&gt;everything needs to stay aligned to a grid
&lt;/li&gt;
&lt;/ul&gt;




&lt;h3&gt;
  
  
  2. Layout math everywhere
&lt;/h3&gt;

&lt;p&gt;Schedulers are basically &lt;strong&gt;math-heavy UIs&lt;/strong&gt;:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;converting timestamps to pixel positions
&lt;/li&gt;
&lt;li&gt;handling overlaps
&lt;/li&gt;
&lt;li&gt;snapping to time intervals
&lt;/li&gt;
&lt;li&gt;recalculating layouts on resize or orientation change
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Once you support multiple views (day, multi-day, timeline),&lt;br&gt;&lt;br&gt;
layout logic tends to spread across the entire codebase.&lt;/p&gt;




&lt;h3&gt;
  
  
  3. Gestures vs. smooth UX
&lt;/h3&gt;

&lt;p&gt;On mobile, gestures are expected:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;drag &amp;amp; drop
&lt;/li&gt;
&lt;li&gt;resizing
&lt;/li&gt;
&lt;li&gt;scrolling
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;But combining:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;gestures
&lt;/li&gt;
&lt;li&gt;animations
&lt;/li&gt;
&lt;li&gt;large datasets
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;often leads to trade-offs:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;smooth scrolling vs. interactive gestures
&lt;/li&gt;
&lt;li&gt;responsiveness vs. correctness
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s very easy to end up with a UI that &lt;em&gt;works&lt;/em&gt;, but feels fragile.&lt;/p&gt;




&lt;h3&gt;
  
  
  4. Mobile and TV are different beasts
&lt;/h3&gt;

&lt;p&gt;A lot of scheduling libraries focus on &lt;strong&gt;desktop web&lt;/strong&gt;.&lt;/p&gt;

&lt;p&gt;On mobile and TV:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;screen real estate is limited
&lt;/li&gt;
&lt;li&gt;input methods differ (touch, remote control)
&lt;/li&gt;
&lt;li&gt;performance budgets are tighter
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;TV especially introduces new challenges:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;focus-based navigation
&lt;/li&gt;
&lt;li&gt;predictable movement
&lt;/li&gt;
&lt;li&gt;no free-form gestures
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Most teams underestimate this until late in the project.&lt;/p&gt;




&lt;h2&gt;
  
  
  Why many teams end up rebuilding everything
&lt;/h2&gt;

&lt;p&gt;I’ve seen the same pattern over and over:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;Start with a simple custom implementation
&lt;/li&gt;
&lt;li&gt;Add features one by one
&lt;/li&gt;
&lt;li&gt;Performance starts degrading
&lt;/li&gt;
&lt;li&gt;More edge cases appear
&lt;/li&gt;
&lt;li&gt;The scheduler becomes the hardest part of the app
&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;At some point, the scheduler:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;takes more time than core product features
&lt;/li&gt;
&lt;li&gt;becomes risky to modify
&lt;/li&gt;
&lt;li&gt;is painful to maintain
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Yet it’s often &lt;strong&gt;mission-critical&lt;/strong&gt;.&lt;/p&gt;




&lt;h2&gt;
  
  
  What I learned building a scheduling component
&lt;/h2&gt;

&lt;p&gt;While working on scheduling and timeline-heavy UIs, a few things became clear:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Scheduling UIs are infrastructure, not features
&lt;/li&gt;
&lt;li&gt;Performance must be designed from day one
&lt;/li&gt;
&lt;li&gt;Layout and rendering logic needs strong boundaries
&lt;/li&gt;
&lt;li&gt;Mobile and TV need first-class consideration
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;Most importantly:&lt;/p&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;strong&gt;Schedulers shouldn’t be rebuilt from scratch for every project.&lt;/strong&gt;&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  Opening the discussion
&lt;/h2&gt;

&lt;p&gt;I’m curious how others approach this in React Native:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Have you built a scheduler or timeline UI before?
&lt;/li&gt;
&lt;li&gt;What was the hardest part — performance, layout, gestures, scale?
&lt;/li&gt;
&lt;li&gt;Did you see issues only after data size increased?
&lt;/li&gt;
&lt;li&gt;Did you build everything yourself or rely on a library?
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I’d love to hear real-world experiences and lessons learned 👇  &lt;/p&gt;

&lt;p&gt;If you’ve fought with scheduling UIs before, you’re definitely not alone.&lt;/p&gt;

</description>
      <category>mobile</category>
      <category>performance</category>
      <category>reactnative</category>
      <category>ui</category>
    </item>
    <item>
      <title>Build a Monthly Planner in React with Planby PRO (5-Minute Tutorial)</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Wed, 03 Sep 2025 08:35:30 +0000</pubDate>
      <link>https://forem.com/kozerkarol/build-a-monthly-planner-in-react-with-planby-pro-5-minute-tutorial-7hk</link>
      <guid>https://forem.com/kozerkarol/build-a-monthly-planner-in-react-with-planby-pro-5-minute-tutorial-7hk</guid>
      <description>&lt;p&gt;Today, we’re going to build a Monthly Planner using Planby PRO in less than five minutes. Sounds amazing, right? Imagine how much time you can save with such a powerful tool.&lt;/p&gt;

&lt;p&gt;So, what is Planby PRO?&lt;br&gt;
It’s a React component designed for creating advanced timelines and schedules. It comes with powerful features like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;drag &amp;amp; drop support — both internal and external,&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;timezone handling,&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;multiple day and day range views,&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;vertical and horizontal layouts,&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;super-fast virtual rendering,&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;and easy third-party integrations.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;  &lt;iframe src="https://www.youtube.com/embed/boNJm5eliBE"&gt;
  &lt;/iframe&gt;
&lt;/p&gt;

&lt;p&gt;Website: &lt;a href="https://planby.app" rel="noopener noreferrer"&gt;https://planby.app&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Docs: &lt;a href="https://docs-pro.planby.app" rel="noopener noreferrer"&gt;https://docs-pro.planby.app&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>reactjsdevelopment</category>
      <category>reactnative</category>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Thu, 07 Aug 2025 07:57:59 +0000</pubDate>
      <link>https://forem.com/kozerkarol/-4oi1</link>
      <guid>https://forem.com/kozerkarol/-4oi1</guid>
      <description>&lt;div class="ltag__link--embedded"&gt;
  &lt;div class="crayons-story "&gt;
  &lt;a href="https://dev.to/kozerkarol/how-i-built-a-lightweight-react-calendar-thats-3-faster-than-fullcalendar-1bj" class="crayons-story__hidden-navigation-link"&gt;How I Built a Lightweight React Calendar That’s 3 Faster Than FullCalendar&lt;/a&gt;


  &lt;div class="crayons-story__body crayons-story__body-full_post"&gt;
    &lt;div class="crayons-story__top"&gt;
      &lt;div class="crayons-story__meta"&gt;
        &lt;div class="crayons-story__author-pic"&gt;

          &lt;a href="/kozerkarol" class="crayons-avatar  crayons-avatar--l  "&gt;
            &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F811734%2F979163e7-1668-4692-abfa-7f3c521bf3ee.png" alt="kozerkarol profile" class="crayons-avatar__image"&gt;
          &lt;/a&gt;
        &lt;/div&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;a href="/kozerkarol" class="crayons-story__secondary fw-medium m:hidden"&gt;
              karolk
            &lt;/a&gt;
            &lt;div class="profile-preview-card relative mb-4 s:mb-0 fw-medium hidden m:inline-block"&gt;
              
                karolk
                
              
              &lt;div id="story-author-preview-content-2757497" class="profile-preview-card__content crayons-dropdown branded-7 p-4 pt-0"&gt;
                &lt;div class="gap-4 grid"&gt;
                  &lt;div class="-mt-4"&gt;
                    &lt;a href="/kozerkarol" class="flex"&gt;
                      &lt;span class="crayons-avatar crayons-avatar--xl mr-2 shrink-0"&gt;
                        &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F811734%2F979163e7-1668-4692-abfa-7f3c521bf3ee.png" class="crayons-avatar__image" alt=""&gt;
                      &lt;/span&gt;
                      &lt;span class="crayons-link crayons-subtitle-2 mt-5"&gt;karolk&lt;/span&gt;
                    &lt;/a&gt;
                  &lt;/div&gt;
                  &lt;div class="print-hidden"&gt;
                    
                      Follow
                    
                  &lt;/div&gt;
                  &lt;div class="author-preview-metadata-container"&gt;&lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;

          &lt;/div&gt;
          &lt;a href="https://dev.to/kozerkarol/how-i-built-a-lightweight-react-calendar-thats-3-faster-than-fullcalendar-1bj" class="crayons-story__tertiary fs-xs"&gt;&lt;time&gt;Aug 7 '25&lt;/time&gt;&lt;span class="time-ago-indicator-initial-placeholder"&gt;&lt;/span&gt;&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;

    &lt;/div&gt;

    &lt;div class="crayons-story__indention"&gt;
      &lt;h2 class="crayons-story__title crayons-story__title-full_post"&gt;
        &lt;a href="https://dev.to/kozerkarol/how-i-built-a-lightweight-react-calendar-thats-3-faster-than-fullcalendar-1bj" id="article-link-2757497"&gt;
          How I Built a Lightweight React Calendar That’s 3 Faster Than FullCalendar
        &lt;/a&gt;
      &lt;/h2&gt;
        &lt;div class="crayons-story__tags"&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/webdev"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;webdev&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/react"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;react&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/javascript"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;javascript&lt;/a&gt;
            &lt;a class="crayons-tag  crayons-tag--monochrome " href="/t/reactnative"&gt;&lt;span class="crayons-tag__prefix"&gt;#&lt;/span&gt;reactnative&lt;/a&gt;
        &lt;/div&gt;
      &lt;div class="crayons-story__bottom"&gt;
        &lt;div class="crayons-story__details"&gt;
          &lt;a href="https://dev.to/kozerkarol/how-i-built-a-lightweight-react-calendar-thats-3-faster-than-fullcalendar-1bj" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left"&gt;
            &lt;div class="multiple_reactions_aggregate"&gt;
              &lt;span class="multiple_reactions_icons_container"&gt;
                  &lt;span class="crayons_icon_container"&gt;
                    &lt;img src="https://assets.dev.to/assets/sparkle-heart-5f9bee3767e18deb1bb725290cb151c25234768a0e9a2bd39370c382d02920cf.svg" width="18" height="18"&gt;
                  &lt;/span&gt;
              &lt;/span&gt;
              &lt;span class="aggregate_reactions_counter"&gt;1&lt;span class="hidden s:inline"&gt; reaction&lt;/span&gt;&lt;/span&gt;
            &lt;/div&gt;
          &lt;/a&gt;
            &lt;a href="https://dev.to/kozerkarol/how-i-built-a-lightweight-react-calendar-thats-3-faster-than-fullcalendar-1bj#comments" class="crayons-btn crayons-btn--s crayons-btn--ghost crayons-btn--icon-left flex items-center"&gt;
              Comments


              &lt;span class="hidden s:inline"&gt;Add Comment&lt;/span&gt;
            &lt;/a&gt;
        &lt;/div&gt;
        &lt;div class="crayons-story__save"&gt;
          &lt;small class="crayons-story__tertiary fs-xs mr-2"&gt;
            2 min read
          &lt;/small&gt;
            
              &lt;span class="bm-initial"&gt;
                

              &lt;/span&gt;
              &lt;span class="bm-success"&gt;
                

              &lt;/span&gt;
            
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;

&lt;/div&gt;


</description>
      <category>webdev</category>
      <category>react</category>
      <category>javascript</category>
      <category>reactnative</category>
    </item>
    <item>
      <title>How I Built a Lightweight React Calendar That’s 3 Faster Than FullCalendar</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Thu, 07 Aug 2025 07:41:24 +0000</pubDate>
      <link>https://forem.com/kozerkarol/how-i-built-a-lightweight-react-calendar-thats-3-faster-than-fullcalendar-1bj</link>
      <guid>https://forem.com/kozerkarol/how-i-built-a-lightweight-react-calendar-thats-3-faster-than-fullcalendar-1bj</guid>
      <description>&lt;h2&gt;
  
  
  😩 The problem with existing React calendars
&lt;/h2&gt;

&lt;p&gt;I love open source. But let's be honest – most calendar or timeline components in React either feel:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;bloated&lt;/strong&gt; (looking at you, FullCalendar)&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;janky on performance&lt;/strong&gt; when rendering 100+ events&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;terrible to style and extend&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I needed something that could:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;render hundreds of time blocks &lt;strong&gt;smoothly&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;support &lt;strong&gt;virtual scrolling&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;play nice with &lt;strong&gt;React state&lt;/strong&gt;
&lt;/li&gt;
&lt;li&gt;actually look like something from the 2020s&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;So I built &lt;strong&gt;Planby&lt;/strong&gt; – a lightweight, modern React timeline/calendar component.&lt;/p&gt;




&lt;h2&gt;
  
  
  ⚡ Meet Planby: A faster, cleaner React timeline
&lt;/h2&gt;

&lt;p&gt;Planby is a customizable, virtualized calendar/timeline component for React and React Native. It supports complex layouts like:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;📺 TV program guides (EPG)&lt;/li&gt;
&lt;li&gt;🎵 Music festival schedules&lt;/li&gt;
&lt;li&gt;🗓️ Multi-day event timelines&lt;/li&gt;
&lt;li&gt;📅 Booking and shift management apps&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;And it’s &lt;strong&gt;~3× faster&lt;/strong&gt; than FullCalendar in real-world scenarios with 500+ events.&lt;/p&gt;




&lt;h2&gt;
  
  
  🧠 How it works (without getting too nerdy)
&lt;/h2&gt;

&lt;p&gt;Planby is built around two things:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;
&lt;strong&gt;Virtual rendering&lt;/strong&gt; – only what's visible is rendered&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Canvas-like layout logic&lt;/strong&gt; – but built entirely in React/DOM&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;That means:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Smooth performance, even on mobile&lt;/li&gt;
&lt;li&gt;Minimal re-renders&lt;/li&gt;
&lt;li&gt;Easy customization through React components and props&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  👇 Here’s how you use it
&lt;/h2&gt;



&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight tsx"&gt;&lt;code&gt;&lt;span class="k"&gt;import&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="nx"&gt;useEpg&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Epg&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="nx"&gt;Layout&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="k"&gt;from&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;@nessprim/planby-pro&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;;&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;channels&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;useMemo&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;logo&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://via.placeholder.com&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;uuid&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;10339a4b-7c48-40ab-abad-f3bcaf95d9fa&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Channel 1&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[]);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="nx"&gt;epg&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nx"&gt;React&lt;/span&gt;&lt;span class="p"&gt;.&lt;/span&gt;&lt;span class="nf"&gt;useMemo&lt;/span&gt;&lt;span class="p"&gt;(()&lt;/span&gt; &lt;span class="o"&gt;=&amp;gt;&lt;/span&gt; &lt;span class="p"&gt;[&lt;/span&gt;
  &lt;span class="p"&gt;{&lt;/span&gt;
    &lt;span class="na"&gt;channelUuid&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;10339a4b-7c48-40ab-abad-f3bcaf95d9fa&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;id&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;b67ccaa3-3dd2-4121-8256-33dbddc7f0e6&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;image&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;https://via.placeholder.com&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;title&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;My cool show&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;description&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;Ut anim nisi consequat minim deserunt...&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;since&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2024-02-02T20:00:00&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
    &lt;span class="na"&gt;till&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="s2"&gt;2024-02-02T21:00:00&lt;/span&gt;&lt;span class="dl"&gt;"&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="p"&gt;},&lt;/span&gt;
&lt;span class="p"&gt;],&lt;/span&gt; &lt;span class="p"&gt;[]);&lt;/span&gt;

&lt;span class="kd"&gt;const&lt;/span&gt; &lt;span class="p"&gt;{&lt;/span&gt;
  &lt;span class="nx"&gt;getEpgProps&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;getLayoutProps&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;onScrollToNow&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;onScrollLeft&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;onScrollRight&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;}&lt;/span&gt; &lt;span class="o"&gt;=&lt;/span&gt; &lt;span class="nf"&gt;useEpg&lt;/span&gt;&lt;span class="p"&gt;({&lt;/span&gt;
  &lt;span class="nx"&gt;epg&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="nx"&gt;channels&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
  &lt;span class="na"&gt;startDate&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;2024/02/02&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt;
&lt;span class="p"&gt;});&lt;/span&gt;

&lt;span class="k"&gt;return &lt;/span&gt;&lt;span class="p"&gt;(&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt; &lt;span class="na"&gt;style&lt;/span&gt;&lt;span class="p"&gt;=&lt;/span&gt;&lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;{&lt;/span&gt; &lt;span class="na"&gt;height&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;600px&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="p"&gt;,&lt;/span&gt; &lt;span class="na"&gt;width&lt;/span&gt;&lt;span class="p"&gt;:&lt;/span&gt; &lt;span class="dl"&gt;'&lt;/span&gt;&lt;span class="s1"&gt;1200px&lt;/span&gt;&lt;span class="dl"&gt;'&lt;/span&gt; &lt;span class="p"&gt;}&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Epg&lt;/span&gt; &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nf"&gt;getEpgProps&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
      &lt;span class="p"&gt;&amp;lt;&lt;/span&gt;&lt;span class="nc"&gt;Layout&lt;/span&gt; &lt;span class="si"&gt;{&lt;/span&gt;&lt;span class="p"&gt;...&lt;/span&gt;&lt;span class="nf"&gt;getLayoutProps&lt;/span&gt;&lt;span class="p"&gt;()&lt;/span&gt;&lt;span class="si"&gt;}&lt;/span&gt; &lt;span class="p"&gt;/&amp;gt;&lt;/span&gt;
    &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nc"&gt;Epg&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
  &lt;span class="p"&gt;&amp;lt;/&lt;/span&gt;&lt;span class="nt"&gt;div&lt;/span&gt;&lt;span class="p"&gt;&amp;gt;&lt;/span&gt;
&lt;span class="p"&gt;);&lt;/span&gt;
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;



&lt;p&gt;That’s it. Fully functional timeline view. Customizable headers, drag &amp;amp; drop, time indicators — all extendable.&lt;/p&gt;




&lt;h2&gt;
  
  
  🚀 Why it’s faster
&lt;/h2&gt;

&lt;p&gt;✅ Uses memoized layout calculations&lt;br&gt;&lt;br&gt;
✅ Virtual scroll powered by requestAnimationFrame&lt;br&gt;&lt;br&gt;
✅ No legacy jQuery-style DOM hacks&lt;br&gt;&lt;br&gt;
✅ Built with React 18 in mind (Concurrent Mode ready)&lt;/p&gt;

&lt;p&gt;In benchmarks against FullCalendar, Planby renders:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;~300% faster initial load with 500+ events&lt;/li&gt;
&lt;li&gt;~80% fewer re-renders on scroll&lt;/li&gt;
&lt;li&gt;significantly smoother on mobile&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🎯 Use cases in the wild
&lt;/h2&gt;

&lt;p&gt;Here’s what people are using Planby for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;TV &amp;amp; streaming guides&lt;/li&gt;
&lt;li&gt;Music festival schedules&lt;/li&gt;
&lt;li&gt;Logistics shift planning&lt;/li&gt;
&lt;li&gt;Healthcare staff rotas&lt;/li&gt;
&lt;li&gt;Conference schedules&lt;/li&gt;
&lt;li&gt;Even live event dashboards with "Scroll to Now" feature&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  🔧 Extend it how you want
&lt;/h2&gt;

&lt;p&gt;Need drag &amp;amp; drop? Timezones? Daily/weekly views?&lt;br&gt;&lt;br&gt;
Planby gives you the layout engine — the rest is up to you.&lt;/p&gt;

&lt;p&gt;It’s a library, not a framework.&lt;/p&gt;




&lt;h2&gt;
  
  
  💡 Why I built it
&lt;/h2&gt;

&lt;p&gt;I was building an internal EPG (Electronic Program Guide) tool and got fed up with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;clunky APIs&lt;/li&gt;
&lt;li&gt;poor mobile UX&lt;/li&gt;
&lt;li&gt;giant bundles&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;I wrote this post out of frustration.&lt;/p&gt;

&lt;p&gt;Now Planby has React Native support, and is used by media companies, startups, and indie hackers alike.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>react</category>
      <category>javascript</category>
      <category>reactnative</category>
    </item>
    <item>
      <title>Building Timelines in React Shouldn’t Be This Hard</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Mon, 28 Jul 2025 10:05:15 +0000</pubDate>
      <link>https://forem.com/kozerkarol/building-timelines-in-react-shouldnt-be-this-hard-2d85</link>
      <guid>https://forem.com/kozerkarol/building-timelines-in-react-shouldnt-be-this-hard-2d85</guid>
      <description>&lt;h2&gt;
  
  
  ❌ Struggling to build performant timeline views in React?
&lt;/h2&gt;

&lt;p&gt;If you’ve ever tried to build a &lt;strong&gt;calendar, scheduling tool, or timeline UI&lt;/strong&gt; in React, you know it’s never as simple as it seems. Especially when you're dealing with:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Hundreds of events across multiple resources (like rooms, people, or stages)
&lt;/li&gt;
&lt;li&gt;Need for live updates, drag &amp;amp; drop, or zooming
&lt;/li&gt;
&lt;li&gt;Data that constantly changes or is dynamically fetched
&lt;/li&gt;
&lt;li&gt;Performance issues with large lists and re-renders
&lt;/li&gt;
&lt;li&gt;Tight deadlines and clients who want “something like Google Calendar”
&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;That’s where &lt;strong&gt;Planby PRO&lt;/strong&gt; comes in.&lt;/p&gt;




&lt;h2&gt;
  
  
  ✅ Designed for developers building complex, event-driven apps
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;Planby PRO&lt;/strong&gt; is a powerful React-based scheduling component built for real-world complexity. Whether you’re creating an event planner, broadcast scheduler, media timeline, or internal dashboard — you shouldn’t have to reinvent the wheel.&lt;/p&gt;

&lt;h3&gt;
  
  
  Planby PRO solves:
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;&lt;p&gt;⚡ &lt;strong&gt;Virtualized rendering for performance&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Even with 500+ events, scrolling and interaction stay buttery smooth.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🧩 &lt;strong&gt;Customizable everything&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Match your branding, logic, and design — from row height to event tooltips.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;⏱️ &lt;strong&gt;Ready to integrate in minutes&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Simple API, clear docs, and a live demo mean you’re up and running in less than 5 minutes.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🔁 &lt;strong&gt;Handles dynamic data&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Fetch events, update live, re-render only what’s needed.&lt;/p&gt;&lt;/li&gt;
&lt;li&gt;&lt;p&gt;🔒 &lt;strong&gt;Commercial-ready features&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
Designed for production — licensed for real business use.&lt;/p&gt;&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  💬 Hear from developers like you:
&lt;/h2&gt;

&lt;blockquote&gt;
&lt;p&gt;&lt;em&gt;“We were stuck with scheduling logic for weeks. Planby PRO dropped in seamlessly and just worked.”&lt;/em&gt;&lt;br&gt;&lt;br&gt;
— Senior Frontend Developer, Brella&lt;/p&gt;

&lt;p&gt;_“Using Planby allowed us to cut the development time for our updated Schedule feature by at least 75% as it supported all the functionalities we designed &amp;amp; were thinking of implementing out of the box!&lt;br&gt;
The other option would've been to create everything from scratch, which would've taken quite a bit some time and we'd have most likely ran into cases that have already been solved by Planby. With it we mostly only needed to adjust the styles, and everything was good to go. We're very happy that we found Planby!"&lt;/p&gt;
&lt;/blockquote&gt;




&lt;h2&gt;
  
  
  🛠️ TL;DR: Stop wasting time on complex timeline UIs
&lt;/h2&gt;

&lt;p&gt;If you’ve been hacking around with DIY solutions or bloated full-calendar libraries, &lt;strong&gt;Planby PRO&lt;/strong&gt; gives you a focused, performant, React-native way to handle real scheduling.&lt;/p&gt;

&lt;p&gt;👉 &lt;strong&gt;Try the &lt;a href="https://planby.app" rel="noopener noreferrer"&gt;live demo&lt;/a&gt;&lt;/strong&gt;&lt;br&gt;&lt;br&gt;
📚 &lt;strong&gt;Explore the &lt;a href="https://docs-pro.planby.app" rel="noopener noreferrer"&gt;docs&lt;/a&gt;&lt;/strong&gt;&lt;/p&gt;




&lt;p&gt;Need help? Questions? Feedback? Feel free to open an issue or reach out — we’d love to hear from you.&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>reactjsdevelopment</category>
      <category>react</category>
    </item>
    <item>
      <title>Introducing Planby PRO: The Ultimate Scheduling Solution for Developer</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Thu, 24 Jul 2025 08:27:17 +0000</pubDate>
      <link>https://forem.com/kozerkarol/introducing-planby-pro-the-ultimate-scheduling-solution-for-developer-9a2</link>
      <guid>https://forem.com/kozerkarol/introducing-planby-pro-the-ultimate-scheduling-solution-for-developer-9a2</guid>
      <description>&lt;p&gt;In today’s fast-paced world, businesses need powerful tools to manage complex schedules, timelines, and live events. Whether you're building a TV guide, project timeline, or live streaming schedule, handling large amounts of data efficiently is crucial. That's where &lt;strong&gt;Planby PRO&lt;/strong&gt; comes in.&lt;/p&gt;

&lt;h2&gt;
  
  
  What is Planby PRO?
&lt;/h2&gt;

&lt;p&gt;&lt;strong&gt;&lt;a href="https://planby.app/" rel="noopener noreferrer"&gt;Planby PRO&lt;/a&gt;&lt;/strong&gt; is a highly customizable React-based component designed to streamline the implementation of schedules, timelines, TV guides, and more. It helps developers create intuitive and interactive experiences with minimal setup. Whether you need to manage a small set of data or work with a massive dataset, Planby PRO is built to handle it seamlessly.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbixpm9r6pfr0dbk7359r.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fbixpm9r6pfr0dbk7359r.png" alt="Music Event" width="800" height="409"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3wapc2n6g3ktcdtvvbw2.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F3wapc2n6g3ktcdtvvbw2.png" alt="Monthly schedule" width="800" height="406"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F87m4h6ifl7d6y89son8m.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F87m4h6ifl7d6y89son8m.png" alt="Calendar shcedule" width="800" height="408"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv4aqfkf1zkgagbslhazo.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fv4aqfkf1zkgagbslhazo.png" alt="Custom theme" width="800" height="412"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;h2&gt;
  
  
  Key Features
&lt;/h2&gt;

&lt;h3&gt;
  
  
  1. &lt;strong&gt;Custom Virtual View for Handling Large Data&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;One of the standout features of Planby PRO is its ability to work with vast amounts of data without compromising performance. Thanks to its custom virtual view, it ensures smooth scrolling and interaction even when dealing with large schedules or complex event timelines.&lt;/p&gt;

&lt;h3&gt;
  
  
  2. &lt;strong&gt;Easy Integration&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Planby PRO is designed with simplicity in mind. The component comes with a simple API that allows for easy integration with any third-party UI libraries. You can get it up and running in less than &lt;strong&gt;5 minutes&lt;/strong&gt;—perfect for developers looking to save time and get straight to building.&lt;/p&gt;

&lt;h3&gt;
  
  
  3. &lt;strong&gt;Customizable Themes&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Whether you're working on a TV guide, event calendar, or a project timeline, the component’s theme can be fully customized to match your app’s design. You can tweak every detail, ensuring that Planby PRO blends seamlessly into your existing UI.&lt;/p&gt;

&lt;h3&gt;
  
  
  4. &lt;strong&gt;Multi-functional Features&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Planby PRO offers a broad range of features, including:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;&lt;strong&gt;Drag-and-drop functionality (DnD)&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Group tree support&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Time zone support&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Vertical/Horizontal view options&lt;/strong&gt;&lt;/li&gt;
&lt;li&gt;&lt;strong&gt;Custom render components&lt;/strong&gt;&lt;/li&gt;
&lt;/ul&gt;

&lt;p&gt;It’s versatile enough to fit a wide range of use cases without compromising on flexibility.&lt;/p&gt;

&lt;h2&gt;
  
  
  Why Use Planby PRO?
&lt;/h2&gt;

&lt;p&gt;As a developer, you need tools that make your life easier. Planby PRO eliminates the complexity involved in building scheduling systems, allowing you to focus on creating great user experiences instead of worrying about performance issues or complicated integration.&lt;/p&gt;

&lt;p&gt;The component is ideal for:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;TV Guides &amp;amp; Live Streaming Platforms&lt;/strong&gt;: Schedule and display events in a clean, organized manner.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Project Management Tools&lt;/strong&gt;: Visualize timelines, task progress, and team collaboration.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Event Management&lt;/strong&gt;: Build seamless event schedules that are easy to update and manage.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  How Does Planby PRO Impact Your Business?
&lt;/h2&gt;

&lt;p&gt;Planby PRO isn’t just a tool—it’s a productivity booster. Here’s how it helps businesses:&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Reduced Development Time&lt;/strong&gt;: With its easy setup and customizable features, you can implement Planby PRO quickly and efficiently.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Enhanced User Experience&lt;/strong&gt;: The smooth performance and intuitive interface result in better user engagement.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Scalability&lt;/strong&gt;: Whether you’re working with a small project or a large-scale application, Planby PRO scales to meet your needs without compromising performance.&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Real-World Use Cases
&lt;/h2&gt;

&lt;p&gt;Several companies have already integrated Planby PRO into their systems. Early feedback highlights that it saves them &lt;strong&gt;valuable development time&lt;/strong&gt; and provides &lt;strong&gt;robust, easy-to-use features&lt;/strong&gt; that keep users coming back.&lt;/p&gt;

&lt;p&gt;For example, media companies have used it to create dynamic TV schedules, while event organizers have built interactive event timelines that update in real-time.&lt;/p&gt;

&lt;h2&gt;
  
  
  The Future of Planby PRO
&lt;/h2&gt;

&lt;p&gt;We’re constantly evolving Planby PRO based on feedback from our users. New features are on the way, and we’re committed to ensuring it remains one of the most efficient, flexible scheduling solutions on the market.&lt;/p&gt;

&lt;h2&gt;
  
  
  Conclusion
&lt;/h2&gt;

&lt;p&gt;If you’re a developer looking for a reliable, customizable scheduling component, Planby PRO is your go-to solution. With its seamless integration, scalability, and focus on user experience, it’s designed to make your life easier and help you build better applications faster.&lt;/p&gt;

&lt;p&gt;Check it out today, and start building your next project with Planby PRO! 🚀&lt;/p&gt;




&lt;p&gt;Feel free to connect with me if you have any questions or suggestions. I'd love to hear how you’re using Planby PRO in your projects!&lt;br&gt;
Website: &lt;a href="https://planby.app" rel="noopener noreferrer"&gt;https://planby.app&lt;/a&gt;&lt;/p&gt;

</description>
      <category>webdev</category>
      <category>programming</category>
      <category>react</category>
      <category>reactnative</category>
    </item>
    <item>
      <title>[Boost]</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Fri, 31 Jan 2025 12:29:03 +0000</pubDate>
      <link>https://forem.com/kozerkarol/-519d</link>
      <guid>https://forem.com/kozerkarol/-519d</guid>
      <description>&lt;div class="ltag__link"&gt;
  &lt;a href="/kozerkarol" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__pic"&gt;
      &lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F811734%2F979163e7-1668-4692-abfa-7f3c521bf3ee.png" alt="kozerkarol"&gt;
    &lt;/div&gt;
  &lt;/a&gt;
  &lt;a href="https://dev.to/kozerkarol/introducing-planby-now-the-ultimate-no-code-tool-for-effortless-scheduling-and-planning-d7m" class="ltag__link__link"&gt;
    &lt;div class="ltag__link__content"&gt;
      &lt;h2&gt;Introducing Planby Now: The Ultimate No-Code Tool for Effortless Scheduling and Planning&lt;/h2&gt;
      &lt;h3&gt;karolk ・ Jan 31&lt;/h3&gt;
      &lt;div class="ltag__link__taglist"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/a&gt;
&lt;/div&gt;


</description>
      <category>nocode</category>
    </item>
    <item>
      <title>Introducing Planby Now: The Ultimate No-Code Tool for Effortless Scheduling and Planning</title>
      <dc:creator>karolk</dc:creator>
      <pubDate>Fri, 31 Jan 2025 12:28:47 +0000</pubDate>
      <link>https://forem.com/kozerkarol/introducing-planby-now-the-ultimate-no-code-tool-for-effortless-scheduling-and-planning-d7m</link>
      <guid>https://forem.com/kozerkarol/introducing-planby-now-the-ultimate-no-code-tool-for-effortless-scheduling-and-planning-d7m</guid>
      <description>&lt;p&gt;In today’s fast-paced world, efficiency is key, and having the right tools at your disposal can make all the difference. Enter &lt;strong&gt;Planby Now&lt;/strong&gt;, the latest no-code solution on the market designed to help you deploy your &lt;strong&gt;schedule, timeline, planner, calendar&lt;/strong&gt;, and more—faster than ever before.&lt;/p&gt;

&lt;p&gt;This innovative platform simplifies the entire process, allowing users to import data directly from CSV files, customize their setup to meet specific service needs, and integrate seamlessly into their existing websites or applications. Whether you’re a &lt;strong&gt;non-technical user&lt;/strong&gt; or a seasoned developer, &lt;strong&gt;Planby Now&lt;/strong&gt; offers a tailored experience that suits everyone.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqliwh94jeyw0m1y3j6d2.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fqliwh94jeyw0m1y3j6d2.jpg" alt="Planby Now music" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz1x7k2z0fdpr3q4pc3s8.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fz1x7k2z0fdpr3q4pc3s8.jpg" alt="Planby Now planner" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvrdbz8qvba4dkew7y9r4.jpg" class="article-body-image-wrapper"&gt;&lt;img src="https://media2.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fvrdbz8qvba4dkew7y9r4.jpg" alt="Planby Now calendar" width="800" height="450"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Why Planby Now Stands Out&lt;/strong&gt;&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;1. Rapid Deployment&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;With &lt;strong&gt;&lt;a href="https://www.planbynow.app/" rel="noopener noreferrer"&gt;Planby Now&lt;/a&gt;&lt;/strong&gt;, you can set up your schedule or planner in minutes. Gone are the days of struggling with complex tools or endless configurations. Simply upload your data from a CSV file, customize the interface to your liking, and you’re good to go.&lt;/p&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;2. Seamless Integration&lt;/strong&gt;
&lt;/h3&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;For Non-Technical Users&lt;/strong&gt;: Integrating your schedule into platforms like &lt;strong&gt;WordPress, Framer, or Webflow&lt;/strong&gt; has never been easier. Just copy a single link, and you’re all set—no coding required.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;For Developers&lt;/strong&gt;: Add a single line of code to embed your schedule into any application, using &lt;strong&gt;Planby Now&lt;/strong&gt; as a CMS. The simplicity and flexibility ensure that your workflow remains smooth and efficient.&lt;/li&gt;
&lt;/ul&gt;

&lt;h3&gt;
  
  
  &lt;strong&gt;3. Comprehensive API Support&lt;/strong&gt;
&lt;/h3&gt;

&lt;p&gt;Want more control? Use the &lt;strong&gt;Planby Now API&lt;/strong&gt; to connect the platform to your existing tools and systems. This makes it perfect for teams looking to centralize their planning and scheduling workflows. With robust CMS functionality, &lt;strong&gt;Planby Now&lt;/strong&gt; can act as a powerful backend solution for you and your team.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Exceptional User Experience&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;What truly sets &lt;strong&gt;Planby Now&lt;/strong&gt; apart is its focus on &lt;strong&gt;modern UX/UI design&lt;/strong&gt;. The dashboard is not only visually stunning but also intuitive and user-friendly, ensuring that you can manage your tasks effortlessly. It’s a tool built with users in mind, offering an experience you won’t find anywhere else.&lt;/p&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;All-in-One Solution&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Whether you need a &lt;strong&gt;planner, calendar, or CMS&lt;/strong&gt;, &lt;strong&gt;Planby Now&lt;/strong&gt; combines everything into one convenient platform. It eliminates the need for multiple tools, streamlining your workflow and saving you time and effort.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Who Can Benefit from Planby Now?&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;
&lt;strong&gt;Small business owners&lt;/strong&gt; looking to integrate schedules into their websites quickly.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Freelancers&lt;/strong&gt; seeking an easy way to manage and display timelines for clients.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Developers&lt;/strong&gt; needing a customizable CMS solution for planning and scheduling.&lt;/li&gt;
&lt;li&gt;
&lt;strong&gt;Teams&lt;/strong&gt; who require centralized management for schedules and projects.&lt;/li&gt;
&lt;/ul&gt;




&lt;h2&gt;
  
  
  &lt;strong&gt;Ready to Try Planby Now?&lt;/strong&gt;
&lt;/h2&gt;

&lt;p&gt;Experience the ease and power of &lt;strong&gt;&lt;a href="https://www.planbynow.app/" rel="noopener noreferrer"&gt;Planby Now&lt;/a&gt;&lt;/strong&gt; for yourself. Whether you’re creating a schedule for your website, managing a timeline, or using the platform as a CMS, this innovative tool has you covered.&lt;/p&gt;

&lt;p&gt;Start your journey with &lt;strong&gt;Planby Now&lt;/strong&gt; today and revolutionize the way you handle schedules and planning.&lt;/p&gt;

</description>
    </item>
  </channel>
</rss>
