Our powerful JS Calendar component


Post by ashokkumar.b »

seems like the calendar is distorted on the UI.

node version - 16.9.1
npm version - 7.21.1

package.json

 "@bryntum/calendar": "^5.0.0-alpha-1",
 "@bryntum/calendar-angular": "^5.0.0-alpha-1",
 "@bryntum/calendar-trial": "^5.0.0-alpha-1",
"@syncfusion/ej2-angular-schedule": "^19.3.55",

added @import "@bryntum/calendar/calendar.classic-dark.css"; in style.scss

got warning in console
Warning: Entry point '@bryntum/calendar-angular' contains deep imports into 'D:/development/monorepo/node_modules/@bryntum/calendar/calendar.lite.umd.js'. This is probably not a problem, but may cause the compilation of entry points to be out of order.

is there any version mismatch?


Post by sergey.maltsev »

Hi!

Please use only one Calendar bundle in package.json.

Check this guide to install trial packages.
https://www.bryntum.com/docs/calendar/guide/Calendar/npm-repository#installing-trial-packages

Should be these two packages in this order:

"dependencies": {
  "@bryntum/calendar": "npm:@bryntum/calendar-trial@4.3.6",
  "@bryntum/calendar-angular": "4.3.6"
}

If you still have problems please refer to this NPM guide:
https://www.bryntum.com/docs/calendar/guide/Calendar/npm-repository

It has Troubleshooting also.

And also please note that Alpha-1 is not stable release so it might have some bugs.
If you need latest alpha for testing please send us some details with some test application we can run and check.


Post by ashokkumar.b »

so don't we need @syncfusion/ej2-angular-schedule?

how to import following

import {
  Calendar,
  EventStore,
  AssignmentModel,
} from '@bryntum/calendar/calendar.lite.umd.js';

Post by sergey.maltsev »

Hi!

We have no @syncfusion/ej2-angular-schedule dependencies. So it is not what is required in project.

Please check our examples for sample code.
https://www.bryntum.com/docs/calendar/guide/Calendar/integration/angular#build-and-run-local-demos


Post by ashokkumar.b »

so now I have installed

"dependencies": {
  "@bryntum/calendar": "npm:@bryntum/calendar-trial@4.3.6",
  "@bryntum/calendar-angular": "4.3.6"
}

with node version as 16.9.1
npm version 8.3

still I have broken view with following warning in console

Warning: D:\development\monorepo\libs\lamr\models\src\lib\models\calendar.ts depends on '@bryntum/calendar/calendar.lite.umd.js'. CommonJS or AMD dependencies can cause optimization bailouts.

my package.json

{
  "name": "myapp",
  "version": "3.9.0",
  "license": "MIT",
  "scripts": {
    "affected": "nx affected",
    "affected:apps": "nx affected:apps",
    "affected:build": "nx affected:build",
    "affected:dep-graph": "nx affected:dep-graph",
    "affected:e2e": "nx affected:e2e",
    "affected:libs": "nx affected:libs",
    "affected:lint": "nx affected:lint",
    "affected:test": "nx affected:test",
    "build": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build simon",
    "build-demo": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build simon --configuration=demo",
    "build-dev": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build simon --configuration=dev --stats-json",
    "build-franq": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build simon --configuration=franq",
    "build-prod": "npm run release && node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build simon --configuration=production && npm run update-repo-changelog",
    "build-staging": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build simon --configuration=staging",
    "build_all_affected": "nx affected:build --base=master --configuration=production",
    "build-lamr": "nx run build lamr",
    "build-lamr-dev": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build lamr --configuration=dev",
    "build-lamr-staging": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build lamr --configuration=staging",
    "build-lamr-prod": "npm run release && node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build lamr --configuration=production",
    "build-lamr-api": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build lamr-api",
    "build-lamr-api-prod": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx build lamr-api --configuration=production",
    "dep-graph": "nx dep-graph",
    "e2e": "ng e2e",
    "format": "nx format:write",
    "format:check": "nx format:check",
    "format:write": "nx format:write",
    "generate-models": "rm -rf tmp && git clone --branch master https://bitbucket.lazard.com/scm/mer/pmrisk_backend.git tmp/pmrisk_backend && csharp-models-to-typescript --config=backend-models-config.json",
    "help": "nx help",
    "lint": "nx workspace-lint && ng lint",
    "ngcc": "./node_modules/.bin/ngcc --properties es2015 browser module main --first-only --create-ivy-entry-points",
    "package:win": "cross-var electron-packager dist SIMON-$npm_package_version --out=packages --platform=win32 --arch=all --overwrite --icon=apps/simon/src/assets/icons/win/icon.ico ",
    "postinstall": "node ./decorate-angular-cli.js && npm run ngcc && node version.js",
    "prettier": "prettier --write .",
    "release": "standard-version",
    "serve-localAPI": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx serve --configuration=localAPI",
    "setup": "npm config set strict-ssl false && npm install",
    "start": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx serve simon --port 4200",
    "start-lamr": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx serve lamr --port 4200",
    "start-lamr-dev": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx serve lamr --configuration=dev --port 4200",
    "start-lamr-api": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx serve lamr-api",
    "test": "node --max_old_space_size=16392 ./node_modules/@nrwl/cli/bin/nx test --codeCoverage=true",
    "test_all": "nx run-many --all --target=test",
    "test_all_affected": "nx affected:test --base=master --watch=false --codeCoverage=true --runInBand --detectOpenHandles --silent",
    "update": "ng update @nrwl/workspace",
    "update-repo-changelog": "git push --follow-tags origin master",
    "workspace-schematic": "nx workspace-schematic"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^10.1.0",
    "@angular/cdk": "^10.2.7",
    "@angular/common": "^10.1.0",
    "@angular/compiler": "^10.1.0",
    "@angular/core": "^10.1.0",
    "@angular/forms": "^10.1.0",
    "@angular/localize": "^10.2.5",
    "@angular/material": "^10.2.7",
    "@angular/material-moment-adapter": "^10.2.7",
    "@angular/platform-browser": "^10.1.0",
    "@angular/platform-browser-dynamic": "^10.1.0",
    "@angular/router": "^10.1.0",
    "@auth0/angular-jwt": "^5.0.2",
    "@bryntum/calendar": "npm:@bryntum/calendar-trial@^4.3.6",
    "@bryntum/calendar-angular": "^4.3.6",
    "@ckeditor/ckeditor5-angular": "^2.0.2",
    "@kolkov/angular-editor": "^1.1.4",
    "@nestjs/common": "^7.0.0",
    "@nestjs/core": "^7.0.0",
    "@nestjs/jwt": "^8.0.0",
    "@nestjs/passport": "^8.0.1",
    "@nestjs/platform-express": "^7.0.0",
    "@nestjs/swagger": "^4.8.2",
    "@nestjs/typeorm": "7.1.5",
    "@ngrx/effects": "^10.0.1",
    "@ngrx/entity": "^10.0.1",
    "@ngrx/router-store": "^10.0.1",
    "@ngrx/store": "^10.0.1",
    "@ngrx/store-devtools": "^10.0.1",
    "@nrwl/angular": "^13.1.3",
    "@progress/kendo-angular-buttons": "^5.0.0",
    "@progress/kendo-angular-common": "^1.0.0",
    "@progress/kendo-angular-dialog": "^4.2.3",
    "@progress/kendo-angular-dropdowns": "^4.4.1",
    "@progress/kendo-angular-l10n": "^2.0.0",
    "@progress/kendo-angular-layout": "^5.1.0",
    "@progress/kendo-angular-popup": "^3.0.0",
    "@progress/kendo-angular-progressbar": "^0.2.3",
    "@progress/kendo-theme-bootstrap": "^4.24.0",
    "@progress/kendo-theme-default": "^4.26.0",
    "ag-grid-angular": "^24.1.0",
    "ag-grid-community": "^24.1.0",
    "ag-grid-enterprise": "^24.1.0",
    "angular-highcharts": "^10.0.1",
    "angular-oauth2-oidc": "^10.0.3",
    "angular-oauth2-oidc-jwks": "^9.0.0",
    "angular2-uuid": "^1.1.1",
    "bootstrap": "^4.5.3",
    "class-transformer": "^0.4.0",
    "class-validator": "^0.13.1",
    "file-saver": "^2.0.5",
    "git-describe": "^4.0.4",
    "highcharts": "^8.2.2",
    "material-icons": "^0.3.1",
    "moment-timezone": "^0.5.32",
    "mssql": "^7.2.1",
    "multer": "^1.4.4",
    "ng-katex": "^2.0.3",
    "ng-mocks": "^11.1.4",
    "ngrx-store-localstorage": "^10.1.1",
    "ngx-loading": "^2.0.1",
    "ngx-mask": "^11.1.4",
    "ngx-treeview": "^10.0.2",
    "node-fetch": "2.0",
    "numeral": "^2.0.6",
    "passport": "^0.4.1",
    "passport-jwt": "^4.0.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~6.5.5",
    "sp-request": "^3.0.0",
    "spsave": "^4.0.2",
    "swagger-ui-express": "^4.1.6",
    "tslib": "^2.0.0",
    "typeorm": "^0.2.38",
    "xml2js": "^0.4.23",
    "zone.js": "^0.10.2"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^0.1100.2",
    "@angular-eslint/eslint-plugin": "~12.3.0",
    "@angular-eslint/eslint-plugin-template": "~12.3.0",
    "@angular-eslint/template-parser": "~12.3.0",
    "@angular/cli": "~10.1.3",
    "@angular/compiler-cli": "^10.1.0",
    "@angular/language-service": "^10.1.0",
    "@nestjs/schematics": "^7.0.0",
    "@nestjs/testing": "^7.0.0",
    "@nrwl/cli": "^12.10.0",
    "@nrwl/cypress": "10.4.4",
    "@nrwl/eslint-plugin-nx": "10.4.4",
    "@nrwl/jest": "10.4.4",
    "@nrwl/nest": "^12.10.0",
    "@nrwl/node": "12.10.0",
    "@nrwl/tao": "^12.10.0",
    "@nrwl/workspace": "^12.10.0",
    "@types/jest": "26.0.8",
    "@types/multer": "^1.4.7",
    "@types/node": "~8.9.4",
    "@types/passport-jwt": "^3.0.6",
    "@types/xml2js": "^0.4.9",
    "@typescript-eslint/eslint-plugin": "4.3.0",
    "@typescript-eslint/parser": "4.3.0",
    "codelyzer": "~5.0.1",
    "commitizen": "^4.2.3",
    "cypress": "^5.5.0",
    "cz-conventional-changelog": "^3.3.0",
    "dotenv": "6.2.0",
    "eslint": "7.10.0",
    "eslint-config-prettier": "6.0.0",
    "eslint-plugin-cypress": "^2.10.3",
    "husky": "^4.3.0",
    "jest": "26.2.2",
    "jest-preset-angular": "8.3.1",
    "jwks-rsa": "^2.0.5",
    "lint-staged": "^10.5.2",
    "prettier": "2.1.2",
    "sp-request": "^3.0.0",
    "spsave": "^4.0.2",
    "standard-version": "^9.1.1",
    "ts-jest": "26.4.0",
    "ts-node": "~7.0.0",
    "tslint": "~6.0.0",
    "typescript": "~4.0.3"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged",
      "pre-push": "yarn test_all_affected && yarn build_all_affected"
    }
  },
  "lint-staged": {
    "*.{js,ts}": [
      "./node_modules/prettier/bin-prettier.js --write",
      "./node_modules/eslint/bin/eslint.js --cache --fix"
    ]
  },
  "config": {
    "commitizen": {
      "path": "./node_modules/cz-conventional-changelog"
    }
  },
  "standard-version": {
    "commitUrlFormat": "https://bitbucket.aws.lazard.com/projects/PMR/repos/monorepo/commits/{{hash}}",
    "compareUrlFormat": "https://bitbucket.aws.lazard.com/projects/PMR/repos/monorepo/compare/commits?targetBranch={{previousTag}}&sourceBranch={{currentTag}}/",
    "issuePrefixes": [
      "pr-",
      "PR-",
      "#"
    ],
    "issueUrlFormat": "https://jira.lazard.com/browse/pr-{{id}}"
  }
}


Post by sergey.maltsev »

Hi!

Console warning should not affect on the app results. It is because of umd library is used for component.

Please check how to use styling in this guide.
https://www.bryntum.com/docs/calendar/guide/Calendar/integration/angular#using-the-wrapper-in-your-application

To start with component we recommend examine our demos to see how it works.

To get help with certain app not working for you please attach full application code here so we can build and test it.


Post by ashokkumar.b »

thanks sergey, the issue is resolved. We have been using monorepo, I have imported css into wrong file. Its working absolutely fine.


Post Reply