better installation instructions and documentation

[rkmax]

I dont know anything about semantic, but based on the bunch of files that semantic create when is installed in order to be customize, I assume that installing this module was something like

1. add the file semantic/src/definitions/modules/calendar.js

require('semantic-ui-calendar/dist/calendar')

2. add the file semantic/src/definitions/modules/calendar.less

@import "~semantic-ui-calendar/src";

3. add to the file semantic/src/semantic.less

& { @import "definitions/modules/calendar"; }

4. on the /semantic.json file add the component "calendar"
5. the last was cd semantic && gulp which build the thing

but I've naived and this is not how this works. could you please add instructions, how to install and allow customized together semantic-ui?

Example semantic tree

semantic/
├── gulpfile.js
├── src
│   ├── definitions
│   │   ├── behaviors
│   │   │   ├── api.js
│   │   │   ├── form.js
│   │   │   └── visibility.js
│   │   ├── collections
│   │   │   ├── breadcrumb.less
│   │   │   ├── form.less
│   │   │   ├── grid.less
│   │   │   ├── menu.less
│   │   │   ├── message.less
│   │   │   └── table.less
│   │   ├── elements
│   │   │   ├── button.less
│   │   │   ├── container.less
│   │   │   ├── divider.less
│   │   │   ├── flag.less
│   │   │   ├── header.less
│   │   │   ├── icon.less
│   │   │   ├── image.less
│   │   │   ├── input.less
│   │   │   ├── label.less
│   │   │   ├── list.less
│   │   │   ├── loader.less
│   │   │   ├── rail.less
│   │   │   ├── reveal.less
│   │   │   ├── segment.less
│   │   │   └── step.less
│   │   ├── globals
│   │   │   ├── reset.less
│   │   │   ├── site.js
│   │   │   └── site.less
│   │   ├── modules
│   │   │   ├── accordion.js
│   │   │   ├── accordion.less
│   │   │   ├── calendar.js
│   │   │   ├── checkbox.js
│   │   │   ├── checkbox.less
│   │   │   ├── dimmer.js
│   │   │   ├── dimmer.less
│   │   │   ├── dropdown.js
│   │   │   ├── dropdown.less
│   │   │   ├── embed.js
│   │   │   ├── embed.less
│   │   │   ├── modal.js
│   │   │   ├── modal.less
│   │   │   ├── nag.js
│   │   │   ├── nag.less
│   │   │   ├── popup.js
│   │   │   ├── popup.less
│   │   │   ├── progress.js
│   │   │   ├── progress.less
│   │   │   ├── rating.js
│   │   │   ├── rating.less
│   │   │   ├── search.js
│   │   │   ├── search.less
│   │   │   ├── shape.js
│   │   │   ├── shape.less
│   │   │   ├── sidebar.js
│   │   │   ├── sidebar.less
│   │   │   ├── sticky.js
│   │   │   ├── sticky.less
│   │   │   ├── tab.js
│   │   │   ├── tab.less
│   │   │   ├── transition.js
│   │   │   └── transition.less
│   │   └── views
│   │       ├── ad.less
│   │       ├── card.less
│   │       ├── comment.less
│   │       ├── feed.less
│   │       ├── item.less
│   │       └── statistic.less
│   ├── semantic.less
│   ├── site
│   │   ├── collections
│   │   │   ├── breadcrumb.overrides
│   │   │   ├── breadcrumb.variables
│   │   │   ├── form.overrides
│   │   │   ├── form.variables
│   │   │   ├── grid.overrides
│   │   │   ├── grid.variables
│   │   │   ├── menu.overrides
│   │   │   ├── menu.variables
│   │   │   ├── message.overrides
│   │   │   ├── message.variables
│   │   │   ├── table.overrides
│   │   │   └── table.variables
│   │   ├── elements
│   │   │   ├── button.overrides
│   │   │   ├── button.variables
│   │   │   ├── container.overrides
│   │   │   ├── container.variables
│   │   │   ├── divider.overrides
│   │   │   ├── divider.variables
│   │   │   ├── flag.overrides
│   │   │   ├── flag.variables
│   │   │   ├── header.overrides
│   │   │   ├── header.variables
│   │   │   ├── icon.overrides
│   │   │   ├── icon.variables
│   │   │   ├── image.overrides
│   │   │   ├── image.variables
│   │   │   ├── input.overrides
│   │   │   ├── input.variables
│   │   │   ├── label.overrides
│   │   │   ├── label.variables
│   │   │   ├── list.overrides
│   │   │   ├── list.variables
│   │   │   ├── loader.overrides
│   │   │   ├── loader.variables
│   │   │   ├── rail.overrides
│   │   │   ├── rail.variables
│   │   │   ├── reveal.overrides
│   │   │   ├── reveal.variables
│   │   │   ├── segment.overrides
│   │   │   ├── segment.variables
│   │   │   ├── step.overrides
│   │   │   └── step.variables
│   │   ├── globals
│   │   │   ├── reset.overrides
│   │   │   ├── reset.variables
│   │   │   ├── site.overrides
│   │   │   └── site.variables
│   │   ├── modules
│   │   │   ├── accordion.overrides
│   │   │   ├── accordion.variables
│   │   │   ├── chatroom.overrides
│   │   │   ├── chatroom.variables
│   │   │   ├── checkbox.overrides
│   │   │   ├── checkbox.variables
│   │   │   ├── dimmer.overrides
│   │   │   ├── dimmer.variables
│   │   │   ├── dropdown.overrides
│   │   │   ├── dropdown.variables
│   │   │   ├── embed.overrides
│   │   │   ├── embed.variables
│   │   │   ├── modal.overrides
│   │   │   ├── modal.variables
│   │   │   ├── nag.overrides
│   │   │   ├── nag.variables
│   │   │   ├── popup.overrides
│   │   │   ├── popup.variables
│   │   │   ├── progress.overrides
│   │   │   ├── progress.variables
│   │   │   ├── rating.overrides
│   │   │   ├── rating.variables
│   │   │   ├── search.overrides
│   │   │   ├── search.variables
│   │   │   ├── shape.overrides
│   │   │   ├── shape.variables
│   │   │   ├── sidebar.overrides
│   │   │   ├── sidebar.variables
│   │   │   ├── sticky.overrides
│   │   │   ├── sticky.variables
│   │   │   ├── tab.overrides
│   │   │   ├── tab.variables
│   │   │   ├── transition.overrides
│   │   │   └── transition.variables
│   │   └── views
│   │       ├── ad.overrides
│   │       ├── ad.variables
│   │       ├── card.overrides
│   │       ├── card.variables
│   │       ├── comment.overrides
│   │       ├── comment.variables
│   │       ├── feed.overrides
│   │       ├── feed.variables
│   │       ├── item.overrides
│   │       ├── item.variables
│   │       ├── statistic.overrides
│   │       └── statistic.variables
│   ├── theme.config
│   ├── theme.less
│   └── themes
│       ├── amazon
│       │   ├── elements
│       │   │   ├── button.overrides
│       │   │   └── button.variables
│       │   └── globals
│       │       └── site.variables
│       ├── basic
│       │   ├── assets
│       │   │   └── fonts
│       │   │       ├── icons.eot
│       │   │       ├── icons.svg
│       │   │       ├── icons.ttf
│       │   │       └── icons.woff
│       │   ├── collections
│       │   │   ├── table.overrides
│       │   │   └── table.variables
│       │   ├── elements
│       │   │   ├── button.overrides
│       │   │   ├── button.variables
│       │   │   ├── icon.overrides
│       │   │   ├── icon.variables
│       │   │   ├── step.overrides
│       │   │   └── step.variables
│       │   ├── globals
│       │   │   ├── reset.overrides
│       │   │   └── reset.variables
│       │   ├── modules
│       │   │   ├── progress.overrides
│       │   │   └── progress.variables
│       │   └── views
│       │       ├── card.overrides
│       │       └── card.variables
│       ├── bookish
│       │   └── elements
│       │       ├── header.overrides
│       │       └── header.variables
│       ├── bootstrap3
│       │   └── elements
│       │       ├── button.overrides
│       │       └── button.variables
│       ├── chubby
│       │   ├── collections
│       │   │   ├── form.overrides
│       │   │   ├── form.variables
│       │   │   ├── menu.overrides
│       │   │   └── menu.variables
│       │   ├── elements
│       │   │   ├── button.overrides
│       │   │   ├── button.variables
│       │   │   ├── header.overrides
│       │   │   └── header.variables
│       │   ├── modules
│       │   │   ├── accordion.overrides
│       │   │   └── accordion.variables
│       │   └── views
│       │       ├── comment.overrides
│       │       └── comment.variables
│       ├── classic
│       │   ├── collections
│       │   │   ├── table.overrides
│       │   │   └── table.variables
│       │   ├── elements
│       │   │   ├── button.overrides
│       │   │   ├── button.variables
│       │   │   ├── header.overrides
│       │   │   └── header.variables
│       │   ├── modules
│       │   │   ├── progress.overrides
│       │   │   └── progress.variables
│       │   └── views
│       │       ├── card.overrides
│       │       └── card.variables
│       ├── colored
│       │   └── modules
│       │       ├── checkbox.overrides
│       │       └── checkbox.variables
│       ├── default
│       │   ├── assets
│       │   │   ├── fonts
│       │   │   │   ├── brand-icons.eot
│       │   │   │   ├── brand-icons.svg
│       │   │   │   ├── brand-icons.ttf
│       │   │   │   ├── brand-icons.woff
│       │   │   │   ├── brand-icons.woff2
│       │   │   │   ├── icons.eot
│       │   │   │   ├── icons.svg
│       │   │   │   ├── icons.ttf
│       │   │   │   ├── icons.woff
│       │   │   │   ├── icons.woff2
│       │   │   │   ├── outline-icons.eot
│       │   │   │   ├── outline-icons.svg
│       │   │   │   ├── outline-icons.ttf
│       │   │   │   ├── outline-icons.woff
│       │   │   │   └── outline-icons.woff2
│       │   │   └── images
│       │   │       └── flags.png
│       │   ├── collections
│       │   │   ├── breadcrumb.overrides
│       │   │   ├── breadcrumb.variables
│       │   │   ├── form.overrides
│       │   │   ├── form.variables
│       │   │   ├── grid.overrides
│       │   │   ├── grid.variables
│       │   │   ├── menu.overrides
│       │   │   ├── menu.variables
│       │   │   ├── message.overrides
│       │   │   ├── message.variables
│       │   │   ├── table.overrides
│       │   │   └── table.variables
│       │   ├── elements
│       │   │   ├── button.overrides
│       │   │   ├── button.variables
│       │   │   ├── container.overrides
│       │   │   ├── container.variables
│       │   │   ├── divider.overrides
│       │   │   ├── divider.variables
│       │   │   ├── flag.overrides
│       │   │   ├── flag.variables
│       │   │   ├── header.overrides
│       │   │   ├── header.variables
│       │   │   ├── icon.overrides
│       │   │   ├── icon.variables
│       │   │   ├── image.overrides
│       │   │   ├── image.variables
│       │   │   ├── input.overrides
│       │   │   ├── input.variables
│       │   │   ├── label.overrides
│       │   │   ├── label.variables
│       │   │   ├── list.overrides
│       │   │   ├── list.variables
│       │   │   ├── loader.overrides
│       │   │   ├── loader.variables
│       │   │   ├── rail.overrides
│       │   │   ├── rail.variables
│       │   │   ├── reveal.overrides
│       │   │   ├── reveal.variables
│       │   │   ├── segment.overrides
│       │   │   ├── segment.variables
│       │   │   ├── step.overrides
│       │   │   └── step.variables
│       │   ├── globals
│       │   │   ├── reset.overrides
│       │   │   ├── reset.variables
│       │   │   ├── site.overrides
│       │   │   └── site.variables
│       │   ├── modules
│       │   │   ├── accordion.overrides
│       │   │   ├── accordion.variables
│       │   │   ├── chatroom.overrides
│       │   │   ├── chatroom.variables
│       │   │   ├── checkbox.overrides
│       │   │   ├── checkbox.variables
│       │   │   ├── dimmer.overrides
│       │   │   ├── dimmer.variables
│       │   │   ├── dropdown.overrides
│       │   │   ├── dropdown.variables
│       │   │   ├── embed.overrides
│       │   │   ├── embed.variables
│       │   │   ├── modal.overrides
│       │   │   ├── modal.variables
│       │   │   ├── nag.overrides
│       │   │   ├── nag.variables
│       │   │   ├── popup.overrides
│       │   │   ├── popup.variables
│       │   │   ├── progress.overrides
│       │   │   ├── progress.variables
│       │   │   ├── rating.overrides
│       │   │   ├── rating.variables
│       │   │   ├── search.overrides
│       │   │   ├── search.variables
│       │   │   ├── shape.overrides
│       │   │   ├── shape.variables
│       │   │   ├── sidebar.overrides
│       │   │   ├── sidebar.variables
│       │   │   ├── sticky.overrides
│       │   │   ├── sticky.variables
│       │   │   ├── tab.overrides
│       │   │   ├── tab.variables
│       │   │   ├── transition.overrides
│       │   │   └── transition.variables
│       │   └── views
│       │       ├── ad.overrides
│       │       ├── ad.variables
│       │       ├── card.overrides
│       │       ├── card.variables
│       │       ├── comment.overrides
│       │       ├── comment.variables
│       │       ├── feed.overrides
│       │       ├── feed.variables
│       │       ├── item.overrides
│       │       ├── item.variables
│       │       ├── statistic.overrides
│       │       └── statistic.variables
│       ├── duo
│       │   └── elements
│       │       ├── loader.overrides
│       │       └── loader.variables
│       ├── fixed-width
│       │   ├── collections
│       │   │   ├── grid.overrides
│       │   │   └── grid.variables
│       │   └── modules
│       │       ├── modal.overrides
│       │       └── modal.variables
│       ├── flat
│       │   ├── collections
│       │   │   ├── form.overrides
│       │   │   └── form.variables
│       │   └── globals
│       │       ├── site.overrides
│       │       └── site.variables
│       ├── github
│       │   ├── assets
│       │   │   └── fonts
│       │   │       ├── octicons-local.ttf
│       │   │       ├── octicons.svg
│       │   │       ├── octicons.ttf
│       │   │       └── octicons.woff
│       │   ├── collections
│       │   │   ├── breadcrumb.variables
│       │   │   ├── form.overrides
│       │   │   ├── form.variables
│       │   │   ├── grid.variables
│       │   │   ├── menu.overrides
│       │   │   ├── menu.variables
│       │   │   ├── message.overrides
│       │   │   ├── message.variables
│       │   │   └── table.variables
│       │   ├── elements
│       │   │   ├── button.overrides
│       │   │   ├── button.variables
│       │   │   ├── header.variables
│       │   │   ├── icon.overrides
│       │   │   ├── icon.variables
│       │   │   ├── image.variables
│       │   │   ├── input.overrides
│       │   │   ├── input.variables
│       │   │   ├── label.overrides
│       │   │   ├── label.variables
│       │   │   ├── segment.overrides
│       │   │   ├── segment.variables
│       │   │   ├── step.overrides
│       │   │   └── step.variables
│       │   ├── globals
│       │   │   └── site.variables
│       │   └── modules
│       │       ├── dropdown.overrides
│       │       ├── dropdown.variables
│       │       └── popup.variables
│       ├── gmail
│       │   └── collections
│       │       ├── message.overrides
│       │       └── message.variables
│       ├── instagram
│       │   └── views
│       │       ├── card.overrides
│       │       └── card.variables
│       ├── material
│       │   ├── assets
│       │   │   └── fonts
│       │   │       ├── icons.eot
│       │   │       ├── icons.svg
│       │   │       ├── icons.ttf
│       │   │       ├── icons.woff
│       │   │       └── icons.woff2
│       │   ├── collections
│       │   │   ├── menu.overrides
│       │   │   └── menu.variables
│       │   ├── elements
│       │   │   ├── button.overrides
│       │   │   ├── button.variables
│       │   │   ├── header.overrides
│       │   │   ├── header.variables
│       │   │   ├── icon.overrides
│       │   │   └── icon.variables
│       │   ├── globals
│       │   │   ├── site.overrides
│       │   │   └── site.variables
│       │   └── modules
│       │       ├── dropdown.overrides
│       │       ├── dropdown.variables
│       │       ├── modal.overrides
│       │       └── modal.variables
│       ├── pulsar
│       │   └── elements
│       │       ├── loader.overrides
│       │       └── loader.variables
│       ├── raised
│       │   └── elements
│       │       ├── button.overrides
│       │       └── button.variables
│       ├── resetcss
│       │   └── globals
│       │       ├── reset.overrides
│       │       └── reset.variables
│       ├── round
│       │   └── elements
│       │       ├── button.overrides
│       │       └── button.variables
│       ├── rtl
│       │   └── globals
│       │       ├── site.overrides
│       │       └── site.variables
│       ├── striped
│       │   └── modules
│       │       ├── progress.overrides
│       │       └── progress.variables
│       ├── timeline
│       │   └── views
│       │       ├── feed.overrides
│       │       └── feed.variables
│       └── twitter
│           └── elements
│               ├── button.overrides
│               └── button.variables
└── tasks
    ├── admin
    │   ├── components
    │   │   ├── create.js
    │   │   ├── init.js
    │   │   └── update.js
    │   ├── distributions
    │   │   ├── create.js
    │   │   ├── init.js
    │   │   └── update.js
    │   ├── publish.js
    │   ├── register.js
    │   └── release.js
    ├── build
    │   ├── assets.js
    │   ├── css.js
    │   └── javascript.js
    ├── build.js
    ├── check-install.js
    ├── clean.js
    ├── collections
    │   ├── admin.js
    │   ├── build.js
    │   ├── internal.js
    │   ├── README.md
    │   └── rtl.js
    ├── config
    │   ├── admin
    │   │   ├── github.js
    │   │   ├── oauth.example.js
    │   │   ├── release.js
    │   │   └── templates
    │   │       ├── bower.json
    │   │       ├── component-package.js
    │   │       ├── composer.json
    │   │       ├── css-package.js
    │   │       ├── less-package.js
    │   │       ├── package.json
    │   │       └── README.md
    │   ├── defaults.js
    │   ├── docs.js
    │   ├── npm
    │   │   └── gulpfile.js
    │   ├── project
    │   │   ├── config.js
    │   │   ├── install.js
    │   │   └── release.js
    │   ├── tasks.js
    │   └── user.js
    ├── docs
    │   ├── build.js
    │   ├── metadata.js
    │   └── serve.js
    ├── install.js
    ├── README.md
    ├── rtl
    │   ├── build.js
    │   └── watch.js
    ├── version.js
    └── watch.js

106 directories, 446 files

[natanaelyabes]

@rkmax Add the calendar to ~/semantic/tasks/config/defaults.js. After gulp build the whole thing, mine works. Refer to #5592

[rkmax]

thx @netanyahuyasser will try that

[lubber-de]

The calendar has been merged into https://github.com/fomantic/Fomantic-UI
Docs here: https://fomantic-ui.com/modules/calendar.html